javascript — веб-приложение зуммера для события кодирования колледжа, которое имеет страницу результатов

Веб-приложение зуммера для события кодирования колледжа, которое имеет страницу результатов

Я новичок в этом сообществе и в настоящее время студент третьего курса колледжа. В моем колледже проводится техническое мероприятие, на котором мы проводим соревнования по программированию. Поэтому мне было интересно, смогу ли я разработать веб-приложение для зуммера, которое использовалось бы участниками для подтверждения выполнения их задачи. Я уже сделал базовое приложение js, которое показывает текущую временную метку и воспроизводит звуковой сигнал при нажатии кнопки. Но я хочу видеть метку времени каждого пользователя, который нажал кнопку на экране администратора, чтобы каждый мог видеть, кто закончил когда.

Кто-нибудь может направить меня относительно того, как я решу эту проблему. Я достаточно компетентен с jquery JavaScript и немного php.

Веб-приложение, которое я сделал до сих пор: bit.do/TechTrivia

 // Title : Tech Trivia Quiz.js // Author : Angad Sudesh Srivastav // Date and Time : 18th October 2019 (10:31 am) // Objective : To make the javascript file of a web app for tech trivia that will have a buzzer system // that will display the time it was pressed and play a sound. This file will make the page dynamic. //Variable for the bleep sound : var bleep = new Audio(); //Giving it the source to the audio file : bleep.src = "http://devangad.000webhostapp.com/siren.mp3"; //A variable to check the state whether a button has been clicked or not : var clickedon = false; // A function to play the sound and display the exact time it was pressed : function datetime(){ var dt = new Date(); var hours = dt.getHours() ; // gives the value in 24 hours format var AmOrPm = hours {amp}gt;= 12 ? 'pm' : 'am'; hours = (hours % 12) || 12; var minutes = dt.getMinutes() ; var seconds = dt.getSeconds(); var milseconds = dt.getMilliseconds(); var finalTime = hours   " : "   minutes   " : "  seconds  " : "  milseconds   " " AmOrPm; console.log(finalTime); if (clickedon != true){ bleep.play(); document.getElementById("Time").innerHTML = document.getElementById("Time").innerHTML   finalTime; clickedon = true; } } // A function to reset the time and reset the sound start point to 0.0 seconds : function datetimereset(){ document.getElementById("Time").innerHTML = "Buzzer Time "; bleep.pause(); bleep.currentTime = 0; clickedon = false; } 
 /* Title : Tech Trivia Quiz.css Author : Angad Sudesh Srivastav Date and Time : 18th October 2019 (10:31 am) Objective : To make the style sheet of a web app for tech trivia that will have a buzzer system that will display the time it was pressed and play a sound. */ body { background: #c31432; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #240b36, #c31432); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */ } img { box-shadow: 5px 5px #000000; } h4, h5{ color: antiquewhite; } .banimg { width: 350px; height: 500px; } .bannerimg { text-align: center; margin-top: 2%; } .contenttext { margin-top: 1%; text-align: center; } .btn { margin: 1%; } footer { text-align: center; } .footertext { color: white; } .footcontent{ padding-top: 10%; } a { text-decoration: none; color: white; } a:hover { text-decoration: none; color: white; } img[src*="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png"] { display: none;} @media (max-width: 768px){ .banimg { width: 200px; height: 320px; } .bannerimg { text-align: center; margin-top: 5%; } .contenttext { margin-top: 5%; text-align: center; } .btn { margin-top: 5%; margin-left: 2%; margin-right: 2%; } .footcontent{ padding-top: 15%; } } 
 {amp}lt;!-- Title : Tech Trivia Quiz.html Author : Angad Sudesh Srivastav Date and Time : 18th October 2019 (10:31 am) Objective : To make the structure of a web app for tech trivia that will have a buzzer system that will display the time it was pressed and play a sound. --{amp}gt; {amp}lt;!-- Document Declaration --{amp}gt; {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;!-- Meta Tags --{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0"{amp}gt; {amp}lt;meta http-equiv="X-UA-Compatible" content="ie=edge"{amp}gt; {amp}lt;!-- Bootstrap Css --{amp}gt; {amp}lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"{amp}gt; {amp}lt;!-- Main Javascript File --{amp}gt; {amp}lt;script src="techtrivia.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;!-- Main Css --{amp}gt; {amp}lt;link rel="stylesheet" href="techtrivia.css"{amp}gt; {amp}lt;!-- Ttile --{amp}gt; {amp}lt;title{amp}gt;Tech Trivia{amp}lt;/title{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;!-- Body of the Page --{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="bannerimg"{amp}gt; {amp}lt;img class="banimg" src="https://devangad.000webhostapp.com/banner.jpg" alt="javascript - веб-приложение зуммера для события кодирования колледжа, которое имеет страницу результатов"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="contenttext"{amp}gt; {amp}lt;h5 id="Time"{amp}gt;Buzzer Time {amp}lt;/h5{amp}gt; {amp}lt;button type="button" class="btn btn-success btn-lg" onclick="datetime()"{amp}gt;Buzzer{amp}lt;/button{amp}gt; {amp}lt;button type="button" class="btn btn-danger btn-lg" onclick="datetimereset()"{amp}gt;Reset{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;footer{amp}gt; {amp}lt;div class="footcontent"{amp}gt; {amp}lt;p class="footertext"{amp}gt;© Dept. of Computer Science St. Xaviers College Hathroi Jaipur Rajasthan, 302001{amp}lt;/p{amp}gt; {amp}lt;p class="footertext"{amp}gt;Developed by : {amp}lt;a href="https://github.com/NotAngad"{amp}gt;Angad Sudesh Srivastav{amp}lt;/a{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/footer{amp}gt; {amp}lt;!-- Bootstrap Files --{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;!-- End of Body --{amp}gt; {amp}lt;div style="text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;"{amp}gt;{amp}lt;a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." target="_blank" href="https://www.000webhost.com/?utm_source=000webhostapp{amp}amp;utm_campaign=000_logo{amp}amp;utm_medium=website{amp}amp;utm_content=footer_img"{amp}gt;{amp}lt;img src="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png" alt="www.000webhost.com"{amp}gt;{amp}lt;/a{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;script{amp}gt;function getCookie(t){for(var e=t "=",n=decodeURIComponent(document.cookie).split(";"),o=0;o{amp}lt;n.length;o  ){for(var i=n[o];" "==i.charAt(0);)i=i.substring(1);if(0==i.indexOf(e))return i.substring(e.length,i.length)}return""}getCookie("hostinger"){amp}amp;{amp}amp;(document.cookie="hostinger=;expires=Thu, 01 Jan 1970 00:00:01 GMT;",location.reload());var wordpressAdminBody=document.getElementsByClassName("wp-admin")[0],notification=document.getElementsByClassName("notice notice-success is-dismissible"),hostingerLogo=document.getElementsByClassName("hlogo"),mainContent=document.getElementsByClassName("notice_content")[0];if(null!=wordpressAdminBody{amp}amp;{amp}amp;notification.length{amp}gt;0{amp}amp;{amp}amp;null!=mainContent){var googleFont=document.createElement("link");googleFontHref=document.createAttribute("href"),googleFontRel=document.createAttribute("rel"),googleFontHref.value="https://fonts.googleapis.com/css?family=Roboto:300,400,600",googleFontRel.value="stylesheet",googleFont.setAttributeNode(googleFontHref),googleFont.setAttributeNode(googleFontRel);var css="@media only screen and (max-width: 576px) {#main_content {max-width: 320px !important;} #main_content h1 {font-size: 30px !important;} #main_content h2 {font-size: 40px !important; margin: 20px 0 !important;} #main_content p {font-size: 14px !important;} #main_content .content-wrapper {text-align: center !important;}} @media only screen and (max-width: 781px) {#main_content {margin: auto; justify-content: center; max-width: 445px;}} @media only screen and (max-width: 1325px) {.web-hosting-90-off-image-wrapper {position: absolute; max-width: 95% !important;} .notice_content {justify-content: center;} .web-hosting-90-off-image {opacity: 0.3;}} @media only screen and (min-width: 769px) {.notice_content {justify-content: space-between;} #main_content {margin-left: 5%; max-width: 445px;} .web-hosting-90-off-image-wrapper {position: absolute; right: 0; display: flex; padding: 0 5%}} .web-hosting-90-off-image {max-width: 90%;} .content-wrapper {z-index: 5} .notice_content {display: flex; align-items: center;} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .upgrade_button_red_sale{box-shadow: 0 2px 4px 0 rgba(255, 69, 70, 0.2); max-width: 350px; border: 0; border-radius: 3px; background-color: #ff4546 !important; padding: 15px 55px !important; margin-bottom: 48px; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 600; color: #ffffff;} .upgrade_button_red_sale:hover{color: #ffffff !important; background: #d10303 !important;}",style=document.createElement("style"),sheet=window.document.styleSheets[0];style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css)),document.getElementsByTagName("head")[0].appendChild(style),document.getElementsByTagName("head")[0].appendChild(googleFont);var button=document.getElementsByClassName("upgrade_button_red")[0],link=button.parentElement;link.setAttribute("href","https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost{amp}amp;utm_medium=panel{amp}amp;utm_campaign=000-wp"),link.innerHTML='{amp}lt;button class="upgrade_button_red_sale"{amp}gt;TRANSFER NOW{amp}lt;/button{amp}gt;',(notification=notification[0]).setAttribute("style","padding-bottom: 0; padding-top: 5px; background-color: #313134; background-size: cover; background-repeat: no-repeat; color: #ffffff; border-color: #ff123a; border-width: 8px;"),notification.className="notice notice-error is-dismissible";var mainContentHolder=document.getElementById("main_content");mainContentHolder.setAttribute("style","padding: 0;"),hostingerLogo[0].remove();var h1Tag=notification.getElementsByTagName("H1")[0];h1Tag.className="000-h1",h1Tag.innerHTML="Black Friday Sale",h1Tag.setAttribute("style",'color: white; margin-top: 48px; font-family: "Roboto", sans-serif; font-size: 48px; font-weight: 600;');var h2Tag=document.createElement("H2");h2Tag.innerHTML="Get 90% Off!",h2Tag.setAttribute("style",'color: white; margin: 45px 0; font-family: "Roboto", sans-serif; font-size: 80px; font-weight: 600;'),h1Tag.parentNode.insertBefore(h2Tag,h1Tag.nextSibling);var paragraph=notification.getElementsByTagName("p")[0];paragraph.innerHTML="Don't miss the opportunity to enjoy up to {amp}lt;strong{amp}gt;4x WordPress Speed, Free SSL and all premium features{amp}lt;/strong{amp}gt; available for a fraction of the price!",paragraph.setAttribute("style",'font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 300;');var list=notification.getElementsByTagName("UL")[0];list.remove();var org_html=mainContent.innerHTML,new_html='{amp}lt;div class="content-wrapper"{amp}gt;' mainContent.innerHTML '{amp}lt;/div{amp}gt;{amp}lt;div class="web-hosting-90-off-image-wrapper"{amp}gt;{amp}lt;img class="web-hosting-90-off-image" src="https://cdn.000webhost.com/000webhost/promotions/black-friday-2019-wordpress.png"{amp}gt;{amp}lt;/div{amp}gt;';mainContent.innerHTML=new_html;var saleImage=mainContent.getElementsByClassName("web-hosting-90-off-image")[0]}{amp}lt;/script{amp}gt;{amp}lt;/body{amp}gt; {amp}lt;!-- End of Html --{amp}gt; {amp}lt;/html{amp}gt; 

Спасибо

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector