var currentTab = 0; // Current tab is set to be the first tab (0) let inputs = [] let eye2 = 0; var speed = 15; var text = ""; const content = document.getElementById("content"); var socket = io.connect(); let responses = [] let questionNumber = 0 let quizID = localStorage.getItem("myID"); window.addEventListener('load', function () { showTab(currentTab); // Display the current tab let testString = "qustion| answer1| answer2| asnwer3| answer4| correct" //test // document.getElementById("testButton").addEventListener('click', function test() { // displayQuestions(testString) // }) //test }) function showTab(n) { // This function will display the specified tab of the form ... var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; //? // ... and fix the Previous/Next buttons: if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; } if (n == (x.length - 1)) { document.getElementById("nextBtn").innerHTML = "Submit"; } else { document.getElementById("nextBtn").innerHTML = "Next"; } // ... and run a function that displays the correct step indicator: fixStepIndicator(n) } function nextPrev(n) { // This function will figure out which tab to display var x = document.getElementsByClassName("tab"); // Exit the function if any field in the current tab is invalid: if (n == 1 && !collectResponses()) return false; // Hide the current tab: x[currentTab].style.display = "none"; // Increase or decrease the current tab by 1: currentTab = currentTab + n; console.log("tab is: " + currentTab) // if you have reached the end of the form... : if (currentTab >= x.length) { //...the form gets submitted: // do we need to send an ID here? let dataToSend = {'user': quizID, 'responses': responses} for (let i = 0; i < responses.length; i++){ console.log(responses[i]); } // socket.emit('quiz-response', responses) socket.emit('quiz-response', dataToSend) console.log("sent quiz response" + dataToSend) // location.replace("../video.html") document.getElementById("regForm").style.display = "none"; document.getElementById("content").style.display = "block"; return false; } // Otherwise, display the correct tab: showTab(currentTab); collectResponses(currentTab) } function collectResponses() { var x, y, i, valid = true; x = document.getElementsByClassName("tab"); // y = x[currentTab].getElementsByTagName("button"); let currentAnswers = "answers" + String(currentTab) y = document.getElementsByClassName(currentAnswers) let answers = document.getElementsByClassName("answers") console.log(answers) for (let i = 0; i < answers.length; i++) { answers[i].addEventListener("click", function () { responses[currentTab] = answers[i].innerHTML console.log('responses: ' + responses) }); } if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; } return valid; // return the valid status } function fixStepIndicator(n) { // This function removes the "active" class of all steps... var i, x = document.getElementsByClassName("step"); for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" active", ""); } //... and adds the "active" class to the current step: x[n].className += " active"; } socket.on('question', (data) => { console.log("reciving data: " + data.message); displayQuestions(data.message) questionNumber++ }) socket.on('summarize', function (data) { if (data.id != quizID){ console.log("wrong person"); return;} console.log("we're receiving a summary!"); console.log(data.message.length); eye2 = 0; text = data.message; // delete placeholder text document.getElementById("content").innerHTML = ""; // document.getElementById("content").scrollTop = scrollHeight; typeText2(); // </br> }); function displayQuestions(data) { console.log("data to display: " + data) let incomingSting = data quesionArray = incomingSting.split('|') console.log(quesionArray) x = document.getElementsByClassName("tab"); x[questionNumber].innerHTML = quesionArray[0] for (let i = 0; i < 4; i++) { let answers = document.createElement("div"); answers.setAttribute("class", "answers"); x[questionNumber].appendChild(answers); answersDisplay = document.getElementsByClassName("answers") answersDisplay[i + questionNumber * 4].innerHTML = quesionArray[i + 1] console.log(answers) } collectResponses() responded = false } // worst possible implementation of this hhHAHAAH function typeText2(){ if (eye2 < text.length) { let newText = document.getElementById("content"); let i = text.charAt(eye2); if (i == '\n'){ newText.innerHTML += '<br>' newText.scrollTop = newText.scrollHeight; } else { newText.innerHTML += i; } eye2++; setTimeout(typeText2, speed); // if (eye == text.length){ } else { let textContent = document.getElementById("content").textContent; const htmlContent = linkify(textContent); document.getElementById("content") = htmlContent; } } // stolen from stackOverflow: // https://stackoverflow.com/questions/1500260/detect-urls-in-text-with-javascript function linkify(text) { var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig; return text.replace(urlRegex, function(url) { return '<a href="' + url + '">' + url + '</a>'; }); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter