My countdown timer is not working - javascript

I am attaching my .js as well as php file, no output is being displayed on the screen not even the __________ placed in the <p> tag ,the php file is only up to the <p> tag where the id for the .js file is attached.
js code:
var timeleft = 600;
var startTime = 0;
var currentTime = 0;
function convertSeconds(s) {
var min = floor(s / 60);
var sec = s % 60;
return nf(min, 2) + ':' + nf(sec, 2);
}
var ding;
function preload() {
ding = loadSound("ding.mp3");
}
function setup() {
noCanvas();
startTime = millis();
var params = getURLParams();
console.log(params);
if (params.minute) {
var min = params.minute;
timeleft = min * 60;
}
var timer = select('#timer');
timer.html(convertSeconds(timeleft - currentTime));
var interval = setInterval(timeIt, 1000);
function timeIt() {
currentTime = floor((millis() - startTime) / 1000);
timer.html(convertSeconds(timeleft - currentTime));
if (currentTime == timeleft) {
ding.play();
clearInterval(interval);
//counter = 0;
}
}
}
html code:
<html>
<head>
<title>online examination system</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<meta charset="UTF-8">
<script language="javascript" type="text/javascript src=" libraries
/p5.js</script>
< script language = "javascript"
src = "libraries/p5.dom.js" ></script>
<script language="javascript" src="libraries/p5.sound.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>
<body>
<div class=header>
<img class="img-style" src="Online-Examination-System-Banner.jpeg" width="1166px" height="250px">
</div>
<div class="top">
<ul id="navigation">
<li>HOME</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
<li>EXAMINATION</li>
<li>LOGIN</li>
<li>LOGOUT</li>
</ul>
</div>
<p style="font-size:40;color:white;font-weight:bolder;">Welcome !</p>
<p id="timer" style="color:white;font-family:courier;font-size:28px; float:center;">______</p>
<form action="cplus.php" method="post" >
<div style="margin-top:10px;margin-right:85px;margin-left:100px;margin- bottom:20px;background:rgba(0,0,0,0.5)">
<p style="color:white;font-family:courier;font-size:18px">1. Which of the following correctly declares an array?</p> <br>
<input class="exam-btn" type="radio" name="q1" id="q1-a" value="A" checked>
<label for="q1-a" style="color:white;font-family:courier;font-size:18px">int array[10];</label>
<input class="exam-btn" type="radio" name="q1" id="q1-b" value="B">
<label style="color:white;font-family:courier;font-size:18px">int array;</label>
<input class="exam-btn" type="radio" name="q1" id="q1-c" value="C">
<label style="color:white;font-family:courier;font-size:18px">array{10};</label>
<input class="exam-btn" type="radio" name="q1" id="q1-d" value="D">
<label style="color:white;font-family:courier;font-size:18px">array array[10];</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">2. What is the index number of the last element of an array with 9 elements?</p> <br>
<input class="exam-btn" type="radio" name="q2" id="q2-a" value="A">
<label style="color:white;font-family:courier;font-size:18px">9</label>
<input class="exam-btn" type="radio" name="q2" id="q2-b" value="B" checked>
<label style="color:white;font-family:courier;font-size:18px">8</label>
<input class="exam-btn" type="radio" name="q2" id="q2-c" value="C">
<label style="color:white;font-family:courier;font-size:18px">0</label>
<input class="exam-btn" type="radio" name="q2" id="q2-d" value="D">
<label style="color:white;font-family:courier;font-size:18px">programmer defined</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">3. Which of the following accesses the seventh element stored in array?</p> <br>
<input class="exam-btn" type="radio" name="q3" id="q3-a" value="A" checked>
<label style="color:white;font-family:courier;font-size:18px">array[6];</label>
<input class="exam-btn" type="radio" name="q3" id="q3-b" value="B" >
<label style="color:white;font-family:courier;font-size:18px">array[7];</label>
<input class="exam-btn" type="radio" name="q3" id="q3-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">array(7);</label>
<input class="exam-btn" type="radio" name="q3" id="q3-d" value="D" >
<label style="color:white;font-family:courier;font-size:18px">array;</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">4. Which of the following gives the memory address of the first element in array?</p> <br>
<input class="exam-btn" type="radio" name="q4" id="q4-a" value="A" >
<label style="color:white;font-family:courier;font-size:18px">array[0];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-b" value="B" >
<label style="color:white;font-family:courier;font-size:18px">array[1];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">array[2];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-d" value="D" checked>
<label style="color:white;font-family:courier;font-size:18px">none</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">5. What will be the output of this program?</p> <br>
<pre style="color:white;font-family:courier;font-size:18px">
#include <stdio.h>
using namespace std;
int array1[] = {1200, 200, 2300, 1230, 1543};
int array2[] = {12, 14, 16, 18, 20};
int temp, result = 0;
int main()
{
for (temp = 0; temp < 5; temp++)
{
result += array1[temp];
}
for (temp = 0; temp < 4; temp++)
{
result += array2[temp];
}
cout << result;
return 0;
}
</pre>
</pre>
<input class="exam-btn" type="radio" name="q5" id="q5-a" value="A" >
<label style="color:white;font-family:courier;font-size:18px">6553</label>
<input class="exam-btn" type="radio" name="q5" id="q5-b" value="B" checked>
<label style="color:white;font-family:courier;font-size:18px">6533</label>
<input class="exam-btn" type="radio" name="q5" id="q5-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">6522</label>
<input class="exam-btn" type="radio" name="q5" id="q5-d" value="D" >
<label style="color:white;font-family:courier;font-size:18px">12200</label>
<br><br><br><br>
<! 1. token 2. sensitive 3. identifiers
4. octal 5. \0n -->
<p style="color:white;font-family:courier;font-size:18px">6.The smallest individual unit in a program is known as a …………………… </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">7.C++ Language is case …………………. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">8.An ………………… is a long sequence of letters and digits. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">9.A sequence of digits beginning with zero is considered to be …………….number. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">10.………………. escape sequence represents the given number in octal form. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p>
<input class="exam-btn" type="text" name="" >
<br><br><br><br>
<input type="submit" value="Submit quiz">
</div>
<div style="font-size:18px;color:white;font-weight:bolder;">
<?php
$answer1;
$answer2;
$answer3;
$answer4;
$answer5;
$answer1 = $_POST['q1'];
$answer2 = $_POST['q2'];
$answer3 = $_POST['q3'];
$answer4 = $_POST['q4'];
$answer5 = $_POST['q5'];
$totalcorrect;
$totalcorrect = 0;
if($answer1 == "A") {$totalcorrect++;}
if($answer2 == "B") {$totalcorrect++;}
if($answer3 == "A") {$totalcorrect++;}
if($answer4 == "D") {$totalcorrect++;}
if($answer5 == "B") {$totalcorrect++;}
echo "total correct answers are".$totalcorrect;
?>
</div>
</div>
</form>
</body>
</html>

Related

How to shuffle the vertical order of across different section labels?

I have a large html document where each part is separated by <section> </section> labels, for example:
<!DOCTYPE html>
<html>
<body>
<section>
<h1>A file</h1>
<form action="/action_page.php">
<p>Please select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</section>
<br>
<section>
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
</section>
<input type="submit" value="Submit">
</form>
</body>
</html>
How can I randomly shuffle the order of the sections? that is, I would like to each time the user loads the page the order of the section randomly switch?
To sort randomly you can use the sort() method along with Math.random() to reorder the elements. Also note that your HTML would need to be changed slightly to make the logic simpler - primarily by adding a new div around the section elements to contain them, and also ensuring that the <form> element wraps all the section content. Try this:
let $container = $('.sections');
$container.find('section').sort((a, b) => Math.random() > 0.5 ? 1 : -1).prependTo($container);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/action_page.php">
<h1>A file</h1>
<div class="sections">
<section>
<p>Please select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</section>
<section>
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
</section>
</div>
<input type="submit" value="Submit">
</form>
Here's the solution I came up with (while the question was still unanswered). I like the jQuery answer now already posted. But if you didn't want to use jQuery:
window.onload = () => {
const sections = document.querySelectorAll('section');
const form = document.querySelector('form');
sections.forEach(el => form.removeChild(el));
Array.from(Array(sections.length).keys()).sort(() => Math.random() - 0.5).forEach((el, i) => form.insertBefore(sections[el], form.childNodes[i]));
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shuffle</title>
</head>
<body>
<h1>A file</h1>
<form action="/action_page.php">
<section>
<p>Please select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br>
</section>
<section>
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br>
</section>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Here's a solution that does not use jquery.
Add unique ids to each section
make a list of ids and shuffle them up (I use Knuth shuffle)
traverse the shuffled array and:
remove the section belonging to the current id (could be anywhere in the current ordering)
prepend the section belonging to the current id to the html (this produces a random ordering)
<!DOCTYPE html>
<html>
<body>
<h1>A file</h1>
<form action="/action_page.php" id="action-page-form">
<section id="gender-section">
<p>Please select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</section>
<section id="age-section">
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br>
</section>
<br>
<input type="submit" value="Submit">
</form>
</body>
<script>
const sectionList = ["gender-section", "age-section"];
// Fisher-Yates (aka Knuth) Shuffle
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
shuffle(sectionList);
var formElement = document.getElementById("action-page-form");
sectionList.forEach(sectionId => {
var thisSection = document.getElementById(sectionId)
thisSection.remove();
formElement.insertBefore(thisSection, formElement.childNodes[0]);
})
</script>
</html>
For Knuth Shuffle see: How to randomize (shuffle) a JavaScript array?

multiple choice quiz with class correct and wrong

I created a multiple choice quiz, and it working perfectly, I mean get the total score written on the website, but I wish to change it to just giving an extra 'correct' or 'wrong' CSS class to the selected input radio buttons after the Submit button has been hit.
HTML:
<section class="quiz">
<div id="results"></div>
<form name="quizForm" onsubmit="return submitAnswer()">
<h4 class="quiz-title knowledge-content-list-item-subheader">Question 1</h4>
<p>Question 1</p>
<div class="quiz-answers">
<input data-answer type="radio" name="q1" value="a" id="q1a"><label for="q1a">Test 1</label><br>
<input data-answer type="radio" name="q1" value="b" id="q1b"><label for="q1b">Test 2</label><br>
<input data-answer type="radio" name="q1" value="c" id="q1c"><label for="q1c">Test 3</label><br>
</div>
<h4 class="quiz-title knowledge-content-list-item-subheader">Question 2</h4>
<p>Question 2</p>
<div class="quiz-answers">
<input data-answer type="radio" name="q2" value="a" id="q2a"><label for="q2a">Test 4</label><br>
<input data-answer type="radio" name="q2" value="b" id="q2b"><label for="q2b">Test 5</label><br>
<input data-answer type="radio" name="q2" value="c" id="q2c"><label for="q2c">Test 6</label><br>
</div>
<h4 class="quiz-title knowledge-content-list-item-subheader">Question 3</h4>
<p>Question 3</p>
<div class="quiz-answers">
<input data-answer type="radio" name="q3" value="a" id="q3a"><label for="q3a">Test 7</label><br>
<input data-answer type="radio" name="q3" value="b" id="q3b"><label for="q3b">Test 8</label><br>
<input data-answer type="radio" name="q3" value="c" id="q3c"><label for="q3c">Test 9</label><br>
</div>
<h4 class="quiz-title knowledge-content-list-item-subheader">Question 4</h4>
<p>Question 4</p>
<div class="quiz-answers">
<input data-answer type="radio" name="q4" value="a" id="q4a"><label for="q4a">Test 10</label><br>
<input data-answer type="radio" name="q4" value="b" id="q4b"><label for="q4b">Test 11</label><br>
<input data-answer type="radio" name="q4" value="c" id="q4c"><label for="q4c">Test 12</label><br>
</div>
<button id="btn-submit" class="btn btn-submit" type="submit" name="submit" value="submit">submit</button>
</form>
</div>
</section>
JavaScript:
function submitAnswer() {
var total = 4;
var score = 0;
// Get User Input
var q1 = document.forms["quizForm"]["q1"].value;
var q2 = document.forms["quizForm"]["q2"].value;
var q3 = document.forms["quizForm"]["q3"].value;
var q4 = document.forms["quizForm"]["q4"].value;
// Validation
for(i = 1; i <= total; i++){
if(eval('q'+i) == null || eval('q'+i) == ''){
alert('You missed question '+ i);
return false;
}
}
// Set Correct Answers
var answers = ["a", "b", "c", "a"];
// Check Answers
for(i = 1; i <= total; i++){
if(eval('q'+i) == answers[i - 1]){
score++;
}
}
// Display results
var results = document.getElementById('results');
results.innerHTML = '<h3>You scored <span>'+score+'</span> out of <span>'+total+'</span></h3>';
return false;
}
I would be really appreciated for any kind of help. Cheers
You can use classLis.add() for that. So in your JS you'd do
document.getElementById('q4a').classList.add('correct')
document.getElementById('q4b').classList.add('wrong')
document.getElementById('q4c').classList.add('wrong')

How Can I Cascade Radio Buttons In Javascript?

I'm new to programming and am tasked with creating a clickable tournament bracket. 8 teams, where you can pick the winners who will advance to the next round.
The problem I'm running into is when a person would want to revise picks in the first or second round after filling out the bracket.
For example in the first round the user picks:
Team1 v. Team8 --> #1 moves on
Team4 v. Team5 --> #4 moves on
Team3 v. Team6 --> #3 moves on
Team2 v. Team7 --> #2 moves on
In the Second Round let's say they pick:
Team1 v. Team4 --> #1 moves on
Team2 v. Team3 --> #2 moves on
In the Finals, they pick:
Team1 v. Team2 --> #1 wins.
Then, let's say the user changes their mind and picks Team8 to upset Team1 in the first round. Right now the code would still show Team1 as the winner and in the final game. How can I remove the text for the future rounds that currently shows Team1?
Attaching JSFiddle here: https://jsfiddle.net/a4hya2c7/5/ or see below code:
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<p>First Round</p>
<div id="round1">
<input type="radio" name="g1" id="i1" value="#1" onclick="changeText(this.value);"><label id="r1">#1</label>
<input type="radio" name="g1" id="i2" value="#8" onclick="changeText(this.value);"><label id="r2">#8</label></br>
<input type="radio" name="g2" id="i3" value="#4" onclick="changeText2(this.value);"><label id="r3">#4</label>
<input type="radio" name="g2" id="i4" value="#5" onclick="changeText2(this.value);"><label id="r4">#5</label></br>
<input type="radio" name="g3" id="i5" value="#3" onclick="changeText3(this.value);"><label id="r5">#3</label>
<input type="radio" name="g3" id="i6" value="#6" onclick="changeText3(this.value);"><label id="r6">#6</label></br>
<input type="radio" name="g4" id="i7" value="#7" onclick="changeText4(this.value);"><label id="r7">#7</label>
<input type="radio" name="g4" id="i8" value="#2" onclick="changeText4(this.value);"><label id="r8">#2</label></br>
</div>
</br>
<p>Second Round</p>
<div id="round2">
<input type="radio" name="g5" id="i9" onclick="changeText5(this.value);"><label id="r9"></label>
<input type="radio" name="g5" id="i10" onclick="changeText5(this.value);"><label id="r10"></label></br>
<input type="radio" name="g6" id="i11" onclick="changeText6(this.value);"><label id="r11"></label>
<input type="radio" name="g6" id="i12" onclick="changeText6(this.value);"><label id="r12"></label></br>
</div>
</br>
<p>Finals</p>
<div id="round3">
<input type="radio" name="g7" id="i13" onclick="changeText7(this.value);"><label id="r13"></label>
<input type="radio" name="g7" id="i14" onclick="changeText7(this.value);"><label id="r14"></label></br>
</div>
</br>
<p>Winner</p>
<div id="round4">
<label value="#8" id="r15"></label></br>
</div>
</br>
</body>
</html>
JS:
function changeText(value) {
document.getElementById('r9').innerHTML = value;
document.getElementById('i9').value = value;
}
function changeText2(value) {
document.getElementById('r10').innerHTML = value;
document.getElementById('i10').value = value;
}
function changeText3(value) {
document.getElementById('r11').innerHTML = value;
document.getElementById('i11').value = value;
}
function changeText4(value) {
document.getElementById('r12').innerHTML = value;
document.getElementById('i12').value = value;
}
function changeText5(value) {
document.getElementById('r13').innerHTML = value;
document.getElementById('i13').value = value;
}
function changeText6(value) {
document.getElementById('r14').innerHTML = value;
document.getElementById('i14').value = value;
}
function changeText7(value) {
document.getElementById('r15').innerHTML = value;
document.getElementById('r15').value = value;
}
Firstly your <br> tags aren't correct as you can see here:
</div>
</br>
You are using the close tag without the opening. You can either use:
<br/>
Or use the newer html5 self closing tags style:
<br>
As to the JS itself, you can simplify it a lot if you use an attribute, similar as the name you are already using to point where it must put the value. With that change the code would be a lot smaller and simpler:
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs){
inp.addEventListener("change", function(){
let targetLabel = document.getElementById(inp.dataset.target);
targetLabel.previousSibling.value = inp.value;
targetLabel.innerHTML = inp.value;
});
}
<p>First Round</p>
<div id="round1">
<input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
<input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
<input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
<input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
<input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
<input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
<input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
<input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
</div>
<br>
<p>Second Round</p>
<div id="round2">
<input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
<input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
<input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
<input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
</div>
<br>
<p>Finals</p>
<div id="round3">
<input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
<input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
</div>
<br>
<p>Winner</p>
<div id="round4">
<label value="#8" id="r15"></label><br>
</div>
<br>
Note that the targets i set were directly to the labels:
<input type="radio" ... data-target="r9">
Then to get to the corresponding radio i used previousSibling.
I used several functions that you may not know:
querySelectorAll - to get an array of elements matching the selector passed
for ... of to iterate on all inputs retrieved by the querySelectorAll
addEventListener - to set the event handler directly on Javascript and make the code cleaner
And with just those little lines of Javascript you have the same functionality, and most importantly, without code duplication.
Now if you want to cascade a change on the first radios to the lower ones, you can call the change event directly with:
const event = new Event('change');
element.dispatchEvent(event);
Whenever you see that the target element already has a value set. This works like a recursive call:
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs){
inp.addEventListener("change", function(){
let targetLabel = document.getElementById(inp.dataset.target);
let targetRadio = targetLabel.previousSibling;
targetRadio.value = inp.value;
targetLabel.innerHTML = inp.value;
//if this isn't the last and it's checked, to not cascade non selected radios
if (targetRadio.hasAttribute && targetRadio.checked){
const nextTargetLabel = document.getElementById(targetRadio.dataset.target);
if (nextTargetLabel.innerHTML != ''){ //if it has a value then cascade
targetRadio.dispatchEvent(new Event('change'));
}
}
});
}
<p>First Round</p>
<div id="round1">
<input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
<input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
<input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
<input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
<input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
<input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
<input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
<input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
</div>
<br>
<p>Second Round</p>
<div id="round2">
<input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
<input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
<input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
<input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
</div>
<br>
<p>Finals</p>
<div id="round3">
<input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
<input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
</div>
<br>
<p>Winner</p>
<div id="round4">
<label value="#8" id="r15"></label><br>
</div>
<br>
Edit:
To clear the following radios instead of cascading the values you can use a while, and navigating with the targets until you reach the end:
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs){
inp.addEventListener("change", function(){
let targetLabel = document.getElementById(inp.dataset.target);
let targetRadio = targetLabel.previousSibling;
targetLabel.innerHTML = inp.value;
targetRadio.value = inp.value;
//while there is a next target clear it
while (targetLabel.previousSibling.hasAttribute){
targetLabel = document.getElementById(targetRadio.dataset.target);
targetRadio = targetLabel.previousSibling;
targetRadio.checked = false;
targetLabel.innerHTML = '';
}
});
}
<p>First Round</p>
<div id="round1">
<input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
<input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
<input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
<input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
<input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
<input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
<input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
<input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
</div>
<br>
<p>Second Round</p>
<div id="round2">
<input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
<input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
<input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
<input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
</div>
<br>
<p>Finals</p>
<div id="round3">
<input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
<input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
</div>
<br>
<p>Winner</p>
<div id="round4">
<label value="#8" id="r15"></label><br>
</div>
<br>

Two independent scripts getting mixed up and giving unexpected output

I am trying to serve 2 quizzes on the same page, however when I click the button Get Score, the first one doesn't work. I have got these two Javascripts in the head:
<script language="JavaScript">
var q1numQues = 5;
var q1numChoi = 4;
var q1answers = new Array(5);
q1answers[0] = "11";
q1answers[1] = "3";
q1answers[2] = "8";
q1answers[3] = "15";
q1answers[4] = "4";
function getQuiz1Score(form) {
var score = 0;
var currElt;
var currSelection;
for (i = 0; i < q1numQues; i++) {
currElt = i * q1numChoi;
for (j = 0; j < q1numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == q1answers[i]) {
score++;
break;
}
}
}
}
score = Math.round(score / q1numQues * 100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i = 1; i <= q1numQues; i++) {
correctAnswers += i + ". " + q1answers[i - 1] + "\r\n";
}
form.solutions.value = correctAnswers;
break;
}
</script>
<script language="JavaScript">
var q2numQues = 4;
var q2numChoi = 3;
var q2answers = new Array(4);
q2answers[0] = "UK";
q2answers[1] = "USA";
q2answers[2] = "Mexico";
q2answers[3] = "Canada";
function getQuiz2Score(form) {
var score = 0;
var currElt;
var currSelection;
for (i = 0; i < q2numQues; i++) {
currElt = i * q2numChoi;
for (j = 0; j < q2numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == q2answers[i]) {
score++;
break;
}
}
}
}
score = Math.round(score / q2numQues * 100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i = 1; i <= q2numQues; i++) {
correctAnswers += i + ". " + q2answers[i - 1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
</script>
And these are my quizzes:
<div class="container" id="pill">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#mathquiz">Maths Quiz</a></li>
<li><a data-toggle="tab" href="#geographyquiz">Geography Quiz</a></li>
</ul>
<div class="tab-content">
<div id="mathquiz" class="tab-pane fade in active">
<div class="image-container">
<img src="images/math.png" class="img-responsive" alt="Our Values Banner">
</div>
<br>
<h4 align="center">Maths Quiz - Please click Get Score after completing to get your score</h4>
<form name="quiz" align="center"> <b>
1. What is 4+7?<br>
<input type="radio" name="q1" value="5">5<br>
<input type="radio" name="q1" value="10">10<br>
<input type="radio" name="q1" value="11">11<br>
<input type="radio" name="q1" value="20">20<br>
2. What is 5-2?<br>
<input type="radio" name="q2" value="0">0<br>
<input type="radio" name="q2" value="5">5<br>
<input type="radio" name="q2" value="3">3<br>
<input type="radio" name="q2" value="8">8<br>
3. What is 4*2?<br>
<input type="radio" name="q3" value="33">33<br>
<input type="radio" name="q3" value="20">20<br>
<input type="radio" name="q3" value="1">1<br>
<input type="radio" name="q3" value="8">8<br>
4. What is 3+12?<br>
<input type="radio" name="q4" value="15">15<br>
<input type="radio" name="q4" value="4">4<br>
<input type="radio" name="q4" value="78">78<br>
<input type="radio" name="q4" value="1">1<br>
5. What is 8/2?<br>
<input type="radio" name="q5" value="4">4<br>
<input type="radio" name="q5" value="7">7<br>
<input type="radio" name="q5" value="9">9<br>
<input type="radio" name="q5" value="8">8<br>
<input type="button" value="Get score" onClick="getQuiz1Score(this.form)">
<input type="reset" value="Clear">
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea> </b>
</form>
</div>
<div id="geographyquiz" class="tab-pane fade">
<div class="image-container">
<img src="images/geography.jpg" class="img-responsive" alt="Geography Quiz">
</div>
<h4 align="center">Geography Quiz</h4>
<form name="quiz" align="center"> <b>
Identify the country the flag belongs to! <br><br>
1. <div class="image-container">
<img src="images/britishflag.png" class="img-responsive" alt="British Flag">
</div><br>
<input type="radio" name="q1" value="UK">UK<br>
<input type="radio" name="q1" value="Germany">Germany<br>
<input type="radio" name="q1" value="Italy">Italy<br><br>
2. <div class="image-container">
<img src="images/usaflag.png" class="img-responsive" alt="USA Flag">
</div><br>
<input type="radio" name="q2" value="Ireland">Ireland<br>
<input type="radio" name="q2" value="Belgium">Belgium<br>
<input type="radio" name="q2" value="USA">USA<br><br>
3. <div class="image-container">
<img src="images/mexicoflag.png" class="img-responsive" alt="Mexican Flag">
</div><br>
<input type="radio" name="q3" value="Brazil">Brazil<br>
<input type="radio" name="q3" value="Mexico">Mexico<br>
<input type="radio" name="q3" value="Chile">Chile<br><br>
4. <div class="image-container">
<img src="images/canadaflag.png" class="img-responsive" alt="Canadian Flag">
</div><br>
<input type="radio" name="q4" value="Japan">Japan<br>
<input type="radio" name="q4" value="Portugal">Portugal<br>
<input type="radio" name="q4" value="Canada">Canada<br>
<input type="button" value="Get score" onClick="getQuiz2Score(this.form)">
<input type="reset" value="Clear">
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea> </b>
</form>
</div>
Please help me to make the Get Score buttons work.
Note: The following was relevant before the OP made edits to implement the changes suggested below. The fix for the OP came down to a superfluous break as pointed out in Rion Williams's answer.
The first script starts with
<script language="JavaScript">
<!--
var numQues = 5;
var numChoi = 4;
What is that <!-- doing there? You delimit this comment later in the script but you comment out the delimeter by writing // -->.
Anyways, your second script starts with
<script language="JavaScript">
var numQues = 4;
var numChoi = 3;
Something you need to understand is that you're declaring these variables globally; at any given point in time, numQuest in script A is the exact same as numQuest in script B (and vice versa) . Due to the nature of declaring variables globally in JavaScript, when you write
var numQuest = 5;
you're effectively writing
window.numQuest = 5;
which sets the variable numQuest as defined and accessible across the entire Browser Object Model (BOM). Read this resource on window and BOM.
You need to either rename your variables or scope the variables like so:
<script language="JavaScript">
(function() {
var numQues = 5;
var numChoi = 4;
... rest of code ...
})();
</script>
I would suggest that you thoroughly read this:
https://stackoverflow.com/a/8348725/5137782
Scoping and Function Overwriting Issues
Currently the names of your functions are the same getScore(name) so the second declaration is actually overwriting the first and your variables are doing the same.
Consider changing each of them to getQ1Score() and getQ2Score() respectively along with where they are called and appending q1 and q2 to your variables and their declarations as well :
// Quiz 1 variables
var q1numQues = 5;
var q1numChoi = 4;
var q1answers = ["11", "3", "8", "15", "4"];
// Quiz 1 score function
function getQ1Score(form) {
/* Omitted for brevity (but ensure you update your variable names too) */
}
along with :
<!-- This will explicitly call your Q1 score calculation -->
<input type="button" value="Get score" onclick="getQ1Score(this.form)">
These are the break;s
Additionally, you have a straggling break; statement at then of your getQuiz1Score(), which would cause things to freak out :
// Remove this to get things up and running
break;
Consider Refactoring A Bit
Overall, you may want to consider some of the points addressed in 8proton's response regarding scoping your functions so you wouldn't have to worry about renaming everything (especially if you intend to add some additional quizzes in the future).
Example Output and Snippet With Updated Changes
// Quiz 1 variables
var q1numQues = 5;
var q1numChoi = 4;
var q1answers = ["11", "3", "8", "15", "4"];
// Quiz 1 score function
function getQ1Score(form) {
var score = 0;
var currElt;
var currSelection;
for (i = 0; i < q1numQues; i++) {
currElt = i * q1numChoi;
for (j = 0; j < q1numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
break;
}
}
}
}
score = Math.round(score / q1numQues * 100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i = 1; i <= q1numQues; i++) {
correctAnswers += i + ". " + q1answers[i - 1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
// -->
// Quiz 2 variables
var q2numQues = 4;
var q2numChoi = 3;
var q2answers = ["UK", "USA", "Mexico", "Canada"];
// Quiz 2 score function
function getQ2Score(form) {
var score = 0;
var currElt;
var currSelection;
for (i = 0; i < q2numQues; i++) {
currElt = i * q2numChoi;
for (j = 0; j < q2numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == q2answers[i]) {
score++;
break;
}
}
}
}
score = Math.round(score / q2numQues * 100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i = 1; i <= q2numQues; i++) {
correctAnswers += i + ". " + q2answers[i - 1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="tab-content">
<div id="mathquiz" class="tab-pane fade in active">
<div class="image-container">
<img src="images/math.png" class="img-responsive" alt="Our Values Banner">
</div>
<br>
<h4 align="center">Maths Quiz - Please click Get Score after completing to get your score</h4>
<form name="quiz1" align="center"> <b>
1. What is 4+7?<br>
<input type="radio" name="q1" value="5">5<br>
<input type="radio" name="q1" value="10">10<br>
<input type="radio" name="q1" value="11">11<br>
<input type="radio" name="q1" value="20">20<br>
2. What is 5-2?<br>
<input type="radio" name="q2" value="0">0<br>
<input type="radio" name="q2" value="5">5<br>
<input type="radio" name="q2" value="3">3<br>
<input type="radio" name="q2" value="8">8<br>
3. What is 4*2?<br>
<input type="radio" name="q3" value="33">33<br>
<input type="radio" name="q3" value="20">20<br>
<input type="radio" name="q3" value="1">1<br>
<input type="radio" name="q3" value="8">8<br>
4. What is 3+12?<br>
<input type="radio" name="q4" value="15">15<br>
<input type="radio" name="q4" value="4">4<br>
<input type="radio" name="q4" value="78">78<br>
<input type="radio" name="q4" value="1">1<br>
5. What is 8/2?<br>
<input type="radio" name="q5" value="4">4<br>
<input type="radio" name="q5" value="7">7<br>
<input type="radio" name="q5" value="9">9<br>
<input type="radio" name="q5" value="8">8<br>
<input type="button" value="Get score" onclick="getQ1Score(this.form)">
<input type="reset" value="Clear">
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea> </b>
</form>
</div>
<div id="geographyquiz" class="tab-pane fade">
<div class="image-container">
<img src="images/geography.jpg" class="img-responsive" alt="Geography Quiz">
</div>
<h4 align="center">Geography Quiz</h4>
<form name="quiz2" align="center"> <b>
Identify the country the flag belongs to! <br><br>
1. <div class="image-container">
<img src="images/britishflag.png" class="img-responsive" alt="British Flag">
</div><br>
<input type="radio" name="q1" value="UK">UK<br>
<input type="radio" name="q1" value="Germany">Germany<br>
<input type="radio" name="q1" value="Italy">Italy<br><br>
2. <div class="image-container">
<img src="images/usaflag.png" class="img-responsive" alt="USA Flag">
</div><br>
<input type="radio" name="q2" value="Ireland">Ireland<br>
<input type="radio" name="q2" value="Belgium">Belgium<br>
<input type="radio" name="q2" value="USA">USA<br><br>
3. <div class="image-container">
<img src="images/mexicoflag.png" class="img-responsive" alt="Mexican Flag">
</div><br>
<input type="radio" name="q3" value="Brazil">Brazil<br>
<input type="radio" name="q3" value="Mexico">Mexico<br>
<input type="radio" name="q3" value="Chile">Chile<br><br>
4. <div class="image-container">
<img src="images/canadaflag.png" class="img-responsive" alt="Canadian Flag">
</div><br>
<input type="radio" name="q4" value="Japan">Japan<br>
<input type="radio" name="q4" value="Portugal">Portugal<br>
<input type="radio" name="q4" value="Canada">Canada<br>
<input type="button" value="Get score" onClick="getQ2Score(this.form)">
<input type="reset" value="Clear">
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea> </b>
</form>
</body>
</html>

JavaScript - How to show the next div and hide the previous one?

I am creating a simple quiz and would like to know how to show one question at a time but only using JavaScript. I do not know jQuery. Essentially, I would like the first question to be shown automatically.
Here is an example of what my HTML looks like:
<div id="q0">
<li>
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</li>
</div>
<div id="q1" style="visibility:hidden">
<li>
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</li>
</div>
<div id="q2" style="visibility:hidden">
<li>
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</li>
</div>
I currently don't have script for showing next div and hiding the previous one because I don't know how to even start.
I'm looking to have it put into this form...
function nextQ(){
// code
}
... and for it to be called by this button:
<button onclick="next()">Next Question</button>
I am really new to HTML and JavaScript and would appreciate any help.
Thanks.
Pure JavaScript version (config):
var showing = [1, 0, 0];
var questions = ['q0', 'q1', 'q2'];
function next() {
var qElems = [];
for (var i = 0; i < questions.length; i++) {
qElems.push(document.getElementById(questions[i]));
}
for (var i = 0; i < showing.length; i++) {
if (showing[i] == 1) {
qElems[i].style.display = 'none';
showing[i] = 0;
if (i == showing.length - 1) {
qElems[0].style.display = 'block';
showing[0] = 1;
} else {
qElems[i + 1].style.display = 'block';
showing[i + 1] = 1;
}
break;
}
}
}
<div id="questions">
<div id="q0">
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</div>
<div id="q1" style="display: none">
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</div>
<div id="q2" style="display: none">
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</div>
</div>
<button onclick="next()">Next Question</button>
Pure JavaScript version (no config):
function next() {
var qElems = document.querySelectorAll('#questions>div');
for (var i = 0; i < qElems.length; i++) {
if (qElems[i].style.display != 'none') {
qElems[i].style.display = 'none';
if (i == qElems.length - 1) {
qElems[0].style.display = 'block';
} else {
qElems[i + 1].style.display = 'block';
}
break;
}
}
}
<div id="questions">
<div id="q0">
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</div>
<div id="q1" style="display: none;">
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</div>
<div id="q2" style="display: none;">
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</div>
</div>
<button onclick="next()">Next Question</button>
jQuery version:
$(function() {
$('.next').on('click', function() {
$('#questions>div').each(function() {
var id = $(this).index();
if ($(this).is(':visible')) {
$(this).hide();
if (id == $('#questions>div').length - 1) {
$('#questions>div').eq(0).show();
} else {
$('#questions>div').eq(id + 1).show();
}
return false;
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="questions">
<div id="q0">
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</div>
<div id="q1" style="display: none">
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</div>
<div id="q2" style="display: none">
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</div>
</div>
<button class="next">Next Question</button>
Though I agree with #Bitwise on using jQuery instead on javascript alone to ensure cross-browser compatibility. But since you insist on using javascript, here's what you should do.
1) Ensure that your <li>'s are enclosed in a container tag first (say, <ul>) so you iterate only through desired list.
2) use display:none property instead of visibility:hidden. visibility:hidden simply hides an element, but it will still take up the same space as before. display:none hides an element, and it will not take up any space.
Here's the updated code.
HTML:
<ul id="listContainer">
<div id="q0">
<li style="display:list-item">
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A"/>Green<br/>
<input type="radio" name="question0" value="B"/>Blue<br/>
<input type="radio" name="question0" value="C"/>Red<br/>
<input type="radio" name="question0" value="D"/>Purple<br/>
</li>
</div>
<div id="q1" >
<li style="display:none">
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A"/>Water<br/>
<input type="radio" name="question1" value="B"/>Cement<br/>
<input type="radio" name="question1" value="C"/>Trees<br/>
<input type="radio" name="question1" value="D"/>The Sky<br/>
</li>
</div>
<div id="q2" >
<li style="display:none">
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A"/>24<br/>
<input type="radio" name="question2" value="B"/>22<br/>
<input type="radio" name="question2" value="C"/>16<br/>
<input type="radio" name="question2" value="D"/>48<br/>
</li>
</div>
</ul>
<button id="next">next</button>
Javascript:
document.getElementById('next').addEventListener("click",function(){
var listContainer = document.getElementById("listContainer");
var listItem = listContainer.getElementsByTagName("li");
for (var i=0; i < listItem.length-1; i++)
{
if(listItem[i].style.display == "list-item")
{
listItem[i].style.display = "none";
listItem[i+1].style.display = "list-item";
break;
}
}
});
Here's the fiddle.
Cheers!
I would twist the code a little. Add question class to every div which acts as question i.e .question { display:none }. Add active class to first question (i.e. .active{display:block}, it shows the first question. Look for all divs with question class and add them to a variable, with every next button pressed,remove active class from current question add active class to next div with class question using classList.add and classList.remove of Javascript until last question is reached. Count keeps the current question's number.
I've done it in the codepen http://codepen.io/dwanirdesh/pen/EaQOPg
Or code directly from below:
<div id="q0" class="question active">
<li>
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</li>
</div>
<div id="q1" class="question" >
<li>
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</li>
</div>
<div id="q2" class="question">
<li>
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</li>
</div>
<button onclick="next()">Next Question</button>
## CSS ##
.question{
display:none
}
.active{
display:block
}
## JAVASCRIPT ##
var questionNumber=0;
var questions=document.querySelectorAll('.question');
function next(){
questionNumber++;
if(questions.length>questionNumber)
{
document.querySelector('.active').classList.remove('active');
questions[questionNumber].classList.add('active');
}
}
Here is the java script function code. For this to work, you need to make sure that the div display property to be set as or in the html code. Also you need to name the id of the button to be "next" so that it can be hidden on reaching the last button.
function nextQ(){
var blockFound = 0;
var lastQuestion = 0;
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
if ( blockFound == 1){
blockFound = 0;
divs[i].style.display = 'block';
}else if ( divs[i].style.display == 'block' ){
if ( i + 2 == divs.length){
lastQuestion = 1;
}
blockFound = 1;
divs[i].style.display = 'none';
}
}
if ( lastQuestion == 1){
document.getElementById('next').style.visibility = 'hidden';
}
}
Html code here.
<div id="q0" style="display:block">
<li>
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</li>
</div>
<div id="q1" style="display:none">
<li>
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</li>
</div>
<div id="q2" style="display:none">
<li>
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</li>
</div>
<button id="next" onclick="nextQ()">Next Question</button>
Is it what you need?
<div id="q0">
<li>
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</li>
<button class="next" onclick="goNext(0)">Next Question</button>
</div>
<div id="q1" style="display:none">
<li>
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</li>
<button class="next" onclick="goNext(1)">Next Question</button>
</div>
<div id="q2" style="display:none">
<li>
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</li>
<button class="next" onclick="goNext(2)">Next Question</button>
</div>
<script language=javascript>
function goNext(i)
{
document.getElementById("q"+i).style.display = 'none';
i++;
document.getElementById("q"+i).style.display = 'block';
}
</script>

Categories

Resources