quiz in javascript score not showing - javascript

I my trying to make multiple choice quiz but for some reason when i click on the sumbit button at the end of the quiz nothing is appearing in the score input. Ive tried everything and still cant get it to work. Could someone please explain what im doing wrong? thanks
function checkAnswer() {
var correct = 0;
var q1 = document.quiz.q1.value;
var q2 = document.quiz.q2.value;
var q3 = document.quiz.q1.value;
var q4 = document.quiz.q4.value;
var answers["Cascading Style Sheets","Dynamic HTML","Netscape","Common Gateway Interface"];
if (q1 === answers[0]) {
correct++
}
if (q2 === answers[1]) {
correct++
}
if (q3 === answers[2]) {
correct++
}
if (q4 === answers[3]) {
correct++
}
var score = Math.round(correct / 4 * 100)
document.getElementById("score").innerHTML = score;
}
HTML:
<h3>Web Design Quiz</h3>
<form id="quiz" name="quiz">
<p> What does CSS stand for? </p>
<ul style="margin-top: 1pt">
<li>
<input type="radio" name="q1" value="Colorful Style Symbols">Colorful Style Symbols</li>
<li>
<input type="radio" name="q1" value="Cascading Style Sheets">Cascading Style Sheets</li>
<li>
<input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>
</ul>
2.
<p>What does DHTML stand for?</p>
<ul style="margin-top: 1pt">
<li>
<input type="radio" id="myCheck" name="q2" value="Dramatic HTML">Dramatic HTML</li>
<li>
<input type="radio" id="myCheck" name="q2" value="Design HTML">Design HTML</li>
<li>
<input type="radio" id="myCheck" name="q2" value="Dynamic HTML">Dynamic HTML</li>
</ul>
3.
<p>Who created Javascript?</p>
<ul style="margin-top: 1pt">
<li>
<input type="radio" id="myCheck" name="q3" value="Microsoft">Microsoft</li>
<li>
<input type="radio" id="myCheck" name="q3" value="Netscape">Netscape</li>
<li>
<input type="radio" id="myCheck" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>
</ul>
4.
<p> What does CGI stand for?</p>
<ul style="margin-top: 1pt">
<li>
<input type="radio" id="myCheck" name="q4" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
<li>
<input type="radio" id="myCheck" name="q4" value="Common GIF Interface">Common GIF Interface</li>
<li>
<input type="radio" id="myCheck" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>
</ul>
<button type="button" onclick='checkAnswer()'>Submit </button>
<input type="reset" value="Clear answers">
<p>
Score = <input type=text size=15 id="score" name="percentage"><br>
</p>
<br>

Open the Developer Tools in your browser. Look at the Console.
You will see a ReferenceError because answers hasn't been defined anywhere.
Use a validator. You have two elements with the same ID.
You seem to be trying to set the innerHTML of a paragraph, but when browsers attempt to recover from your error, they will take the first element with that ID, which is an <input>.
You are triggering the JS when a submit button is clicked. As soon as the JS finished, the form will submit an a new page will be loaded.
Use a type="button".

When setting the value of an input-element you should use the value attribute of the element, rather than the innerHTML.
document.getElementById("score").value = score;
Edit
It is unclear whether you want to set the score in the paragraph element or in the input element, which both share the same id.

You have a lot of mistake in your code. Which were mention before in comments. Here's solution:
<h3>Web Design Quiz</h3>
<form id="quiz" name="quiz">
<p> What does CSS stand for? </p>
<ul style="margin-top: 1pt">
<li><input type="radio" name="q1" value="Colorful Style Symbols">Colorful Style Symbols</li>
<li><input type="radio" name="q1" value="Cascading Style Sheets">Cascading Style Sheets</li>
<li><input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>
</ul>
2. <p>What does DHTML stand for?</p>
<ul style="margin-top: 1pt">
<li><input type="radio" name="q2" value="Dramatic HTML">Dramatic HTML</li>
<li><input type="radio" name="q2" value="Design HTML">Design HTML</li>
<li><input type="radio" name="q2" value="Dynamic HTML">Dynamic HTML</li>
</ul>
3. <p>Who created Javascript?</p>
<ul style="margin-top: 1pt">
<li><input type="radio" name="q3" value="Microsoft">Microsoft</li>
<li><input type="radio" name="q3" value="Netscape">Netscape</li>
<li><input type="radio" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>
</ul>
4.<p> What does CGI stand for?</p>
<ul style="margin-top: 1pt">
<li><input type="radio" name="q4" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
<li><input type="radio" name="q4" value="Common GIF Interface">Common GIF Interface</li>
<li><input type="radio" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>
</ul>
<input type="button" onclick='checkAnswer()'>check </input>
<input type="reset" value="Clear answers">
And in your js file
var answers = ["Cascading Style Sheets","Dynamic HTML","Netscape","Common Gateway Interface"];

Related

How can I prevent showing non-active divs

I have some quizzes, like I showed below. Each Quiz ends with submit and reset button. The problem here is, if I click submit button in a quiz it shows the other quiz answer too.
Can someone help me to prevent showing the answer other than active quiz div
<div id="quiz-1" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<div id="quiz-2" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<div id="quiz-3" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<!--- HTML CODE --->
<div id="quiz-1" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-1 -->
<div id="quiz-2" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-2 -->
<div id="quiz-3" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-3 -->
$('.btn1').on('click', chkd_answer);
$('.btn2').on('click', reset);
function chkd_answer() {
var chkd_optn = $('input:checked');
var correct = $("li.correct");
var wrong = chkd_optn.parent("li").not(".correct");
if (chkd_optn.length < 3) {
$('.ans_all').fadeIn(1000).fadeOut(800);
} else {
$('.expn').slideToggle();
correct.toggleClass('g-class'); // adding green
wrong.toggleClass('r-class'); // adding red
}
}
function reset(){
var chkd_optn = $('input:checked');
chkd_optn.prop("checked", false);
$('.expn').slideUp();
$('li').removeClass('g-class r-class');
}
Try replacing your function with the below one:
function chkd_answer() {
var currentButton = $(this);
var chkd_optn = $('input:checked');
var correct = $("li.correct");
var wrong = chkd_optn.parent("li").not(".correct");
if (chkd_optn.length < 3) {
$('.ans_all').fadeIn(1000).fadeOut(800);
} else {
$(currentButton).closest(".quiz").find('.expn').slideToggle(); // searching the associated .expn element to show it
correct.toggleClass('g-class'); // adding green
wrong.toggleClass('r-class'); // adding red
}
}
Also all your code show work with the associated option buttons from where the button has been clicked. So please check your rest of the code too.

How do I randomize multiple unordered lists within a randomized ordered list?

I'm trying to make a test with randomized questions(randomize the ordered list) that contain randomized answers(randomize the unordered lists). I can get the ordered list to randomize, but I can only get one unordered list to randomize. The code only randomizes the first unordered list it finds. I would like to randomize all the unordered lists. Any help is appreciated.
<ol>
<li>What are the three main areas of the Standard User Interface?
<ul type="none">
<li><input type="radio" name="q1" value="0" />A. Header, Banner, Frame, Application Window</li>
<li><input type="radio" name="q1" value="0" />B. Content Frame, Homepage, Form </li>
<li><input type="radio" name="q1" value="1" />C. Application Navigator, Banner Frame, Content Frame </li>
<li><input type="radio" name="q1" value="0" />D. None of the above</li>
</ul>
</li>
<li>In the User interface, what is the gray toolbar called which allows you to add bookmarks?<br/>
<ul type="none">
<li><input type="radio" name="g2" value="0" />A. Gauge</li><br />
<li><input type="radio" name="g2" value="1" />B. Edge</li><br />
<li><input type="radio" name="g2" value="0" />C. Remedy</li><br />
<li><input type="radio" name="g2" value="0" />D. Banner</li><br />
</ul><br/>
</li>
<li>What can be captured in an update set?<br/>
<ul type="none">
<li><input type="radio" name="g3" value="0" />A. Modified CI Rules</li><br />
<li><input type="radio" name="g3" value="1" />B. Business Rules</li><br />
<li><input type="radio" name="g3" value="0" />C. Scheduled Jobs</li><br />
<li><input type="radio" name="g3" value="0" />D. None of the above</li><br />
</ul>
</li>
<li>What should you always do before you commit an update set?<br/>
<ul type="none">
<li><input type="radio" name="g4" value="1" />A. Preview</li><br />
<li><input type="radio" name="g4" value="0" />B. Merge</li><br />
<li><input type="radio" name="g4" value="0" />C. Ignore</li><br />
<li><input type="radio" name="g4" value="0" />D. All of the above</li><br />
</ul>
</li>
<li>Which of the following is a Business Rule best pratice?<br/>
<ul type="none">
<li><input type="radio" name="g5" value="1" />A. Make business rules small and specific</li><br />
<li><input type="radio" name="g5" value="0" />B. Use of conditions is not necessary</li><br />
<li><input type="radio" name="g5" value="0" />C. Global business rules should be used</li><br />
<li><input type="radio" name="g5" value="0" />D. None of the above</li><br />
</ul>
</li>
<li>Which of the following is a Client Script best practice?<br/>
<ul type="none">
<li><input type="radio" name="g6" value="0" />A. Use hard coded data</li><br />
<li><input type="radio" name="g6" value="0" />B. Maximize server lookup</li><br />
<li><input type="radio" name="g6" value="1" />C. Do not use g_form.getReference()</li><br />
<li><input type="radio" name="g6" value="0" />D. All of the above</li><br />
</ul>
</li>
<li>Which of the following are debugging features?<br/>
<ul type="none">
<li><input type="radio" name="g7" value="0"/>A. Debug Business Rule</li><br />
<li><input type="radio" name="g7" value="0"/>B. Javascript</li><br />
<li><input type="radio" name="g7" value="1"/>C. A and B</li><br />
<li><input type="radio" name="g7" value="0"/>D. None of the above</li><br />
</ul>
</li>
</ol>
Here is my randomization code:
var ol = document.querySelector('ol');
temp = ol.cloneNode(true);
for (var i = temp.children.length; i--; ){
temp.appendChild( temp.children[Math.random() * i |0] );
ul.parentNode.replaceChild(temp, ol);
}
var ul = document.querySelector('ul');
temp = ul.cloneNode(true);
for (var i = temp.children.length + 1; i--; ){
temp.appendChild( temp.children[Math.random() * I |0] );
ul.parentNode.replaceChild(temp, ul);
}
document.querySelector() works for the ol element because there is only one. To capture the uls use querySelectorAll and loop through value of same. There is also a problem in that the parent nodes of ol and ul get lost. The parentNode.replaceChild... statements have to come after, not within, the for loops. In the loop over the querySelectorAll value, the parent node has to be backed up; see setting parent node in javascript
var ol = document.querySelector('ol');
temp = ol.cloneNode(true);
for (var i = temp.children.length; i--;) {
temp.appendChild(temp.children[Math.random() * i | 0]);
}
ol.parentNode.replaceChild(temp, ol);
var ul = document.querySelectorAll('ul'), parent;
console.log("found " + ul.length + " ul's");
for (var k = ul.length-1; k >= 0; k--) {
parent = ul[k].parentNode;
temp = ul[k].cloneNode(true);
for (var i = temp.children.length + 1; i--;) {
temp.appendChild(temp.children[Math.random() * i | 0]);
}
parent.replaceChild(temp, ul[k]);
}

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>

JavaScript Quiz Valadition

I seem to be having some trouble validating a 4 question multiple choice quiz in JavaScript. Right now if none of the answers are selected the alert pops up, but if even only one answer is selected the alert doesn't pop. I'm running my function as an onclick for a submit button. I'm fairly new to JavaScript and JQuery but have other programming experience, so The problem is probably something simple but I cant see it.
The function is:
function quiz1(){
if (!$("input[#name=q1]:checked").val() ||
!$("input[#name=q2]:checked").val() ||
!$("input[#name=q3]:checked").val() ||
!$("input[#name=q4]:checked").val() ||
!$("input[#name=q5]:checked").val()
) {
alert("You're not done yet!");
}
}
The html is:
<p class="question">1. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
</ul>
<p class="question">2. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Answer 1</label><br/>
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">Answer 2</label><br/>
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">Answer 3</label><br/>
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">Answer 4</label><br/>
</ul>
<p class="question">3. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a">Answer 1</label><br/>
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b">Answer 2</label><br/>
<input type="radio" name="q3" value="c" id="q3c"><label for="q3c">Answer 3</label><br/>
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d">Answer 4</label><br/>
</ul>
<p class="question">4. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a">Answer 1</label><br/>
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b">Answer 2</label><br/>
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c">Answer 3</label><br/>
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d">Answer 4</label><br/>
</ul>
<div class="submit">
<input type="submit" onclick="quiz1()" value="Check Answers">
</div>
You have some syntax errors in there.
before:
function quiz1(){
if (!$("input[#name=q1]:checked").val() ||
!$("input[#name=q2]:checked").val() ||
!$("input[#name=q3]:checked").val() ||
!$("input[#name=q4]:checked").val() ||
!$("input[#name=q5]:checked").val()
) {
alert("You're not done yet!");
}
}
After:
function quiz1(){
if (!$("input[name='q1']:checked").val() ||
!$("input[name='q2']:checked").val() ||
!$("input[name='q3']:checked").val() ||
!$("input[name='q4']:checked").val()
) {
alert("You're not done yet!");
}
}
so with jquery when you want to reference a name you have to type it just like the name attribute in the html that is true with any attribute selector E.G.(data='', ng-someting=''...) and also you had one to many inputs in there XD
here is a jsfiddle

jQuery Quiz compare correct answer in array

My HTML
<div class="questions">
<p>Q1</p>
<label><input name="q1" id="q1-a" type="radio" />Q1 ans A</label>
<label><input name="q1" id="q1-b" type="radio" />Q1 ans B</label>
<label><input name="q1" id="q1-c" type="radio" />Q1 ans C</label>
</div>
<div class="questions hide">
<p>Q2</p>
<label><input name="q2" id="q1-a" type="radio" />Q2 ans A</label>
<label><input name="q2" id="q1-b" type="radio" />Q2 ans B</label>
<label><input name="q2" id="q1-c" type="radio" />Q2 ans C</label>
</div>
<div class="questions hide">
<p>Q3</p>
<label><input name="q3" id="q1-a" type="radio" />Q3 ans A</label>
<label><input name="q3" id="q1-b" type="radio" />Q3 ans B</label>
<label><input name="q3" id="q1-c" type="radio" />Q3 ans C</label>
</div>
Check
MY JS
$("#checkAns").click(function(){
}
Here are the array of answer which I want to compare
answers: { q1: 'a', q2: 'b', q3: 'a'}
If user trigger radio button then it will show alert if is Correct or Wrong then it will return true; if wrong false then this is the time it will show another question for answering
I do want to avoid if else in checking the user answer is this possible?
First, don't forget to add value on each radio button. Also id is not really needed here, except you need to do something on each radio button:
<div>
<label><input name="q1" type="radio" value="a" />Q1 A</label>
<label><input name="q1" type="radio" value="b" />Q1 B</label>
<label><input name="q1" type="radio" value="c" />Q1 C</label>
</div>
Then for checking answers, you can use this:
var answers = {q1 : 'a', q2 : 'b', q3 : 'a'};
$('#checkAns').click(function(e) {
$.each(answers, function(question, answer) {
if($('input:radio[name="' + question + '"]:checked').val() == answer)
alert(question + ': True');
else
alert(question + ': False!');
});
e.preventDefault();
});
Updated answer :
HTML & CSS
I think you don't need an anchor to click, because this time the script check the answer as soon as the radio button is triggered.
<style type="text/css">
.hide { display:none; }
</style>
<div class="questions">
<p>Q1</p>
<label><input type="radio" name="q1" value="a" />Q1 A</label>
<label><input type="radio" name="q1" value="b" />Q1 B</label>
<label><input type="radio" name="q1" value="c" />Q1 C</label>
</div>
<div class="questions hide">
<p>Q2</p>
<label><input type="radio" name="q2" value="a" />Q2 A</label>
<label><input type="radio" name="q2" value="b" />Q2 B</label>
<label><input type="radio" name="q2" value="c" />Q2 C</label>
</div>
<div class="questions hide">
<p>Q3</p>
<label><input type="radio" name="q3" value="a" />Q3 A</label>
<label><input type="radio" name="q3" value="b" />Q3 B</label>
<label><input type="radio" name="q3" value="c" />Q3 C</label>
</div>
Javascript using jQuery
var answers = {q1: 'a', q2: 'b', q3: 'a'};
$('input:radio').click(function() {
var container = $(this).parents('div');
var question = $(this).attr('name');
var answer = $(this).val();
alert(answers[question] == answer);
container.addClass('hide');
container.next().removeClass('hide');
});
Just modify the script as you need. Hope this time is right.. :P

Categories

Resources