How can I get the same result after quiz ends without clicking the Results button
Here is what I've tried
if (currentQuestion == totalQuestions) {
var outputDiv = document.getElementById("quizEnds");
outputDiv.innerHTML = "You have reached the final question.";
$('#next').remove();
getScore(this.form);
}
it does not work. can someone point out the error please. it has to be two separated files. thanks
//quizeffect.js
var totalQuestions = $('.questions').size();
var currentQuestion = 0;
$questions = $('.questions');
$questions.hide();
$($questions.get(currentQuestion)).fadeIn();
$('#next').click(function () {
$($questions.get(currentQuestion)).fadeOut(function () {
currentQuestion = currentQuestion + 1;
if (currentQuestion == totalQuestions) {
var outputDiv = document.getElementById("quizEnds");
outputDiv.innerHTML = "<h2>You have reached the final question.</h2>";
$('#next').remove();
getScore(this.form);
} else {
$($questions.get(currentQuestion)).fadeIn();
}
});
});
//tlcquizzapp.js
/*====================app js====================*/
var numberOfQuestions = 6;
// Insert number of choices in each question
var numberOfChoices = 4;
var rightAnswers = 0;
var correct = [];
var wrong =[];
var answers = new Array("Double Parking",
"The aplicant will have the aplication denied", "Never", "All of the above",
"Yellow taxi medallion base", "You are allowed to pick up in the crosswalk if the passenger is standing at the intersection");
function print(message) {
var outputDiv = document.getElementById("output");
outputDiv.innerHTML = message;
}
function buildList(arr) {
var listHTML = '<ol>';
for (var i = 0; i < arr.length; i++) {
listHTML += '<li>' + arr[i] + '</li>';
}
listHTML += '</ol>';
return listHTML;
}
// Do not change anything below here ...
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i = 0; i < numberOfQuestions; i++) {
currElt = i * numberOfChoices;
for (j = 0; j < numberOfChoices; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
correct.push(currSelection.value);
}
else{
wrong.push(currSelection.value);
}
}
}
}
score = Math.round(score/numberOfQuestions*100);
var userAnswers = '<p>You got ' + score + ' % on your test.</p>';
userAnswers += '<h2>You got these answers correct:</h2>';
userAnswers += buildList(correct);
userAnswers += '<h2>You got these answers wrong</h2>';
userAnswers += buildList(wrong);
print(userAnswers);
}
.questions p{
font-size: 24px;
background-color: #3399FF;
color: #FFF;
padding: 20px;
}
.options li{
font-size: 18px;
}
form {
width: 80%;
margin: 0 auto;
border: 1px solid #DDD;
}
button {
border: none;
padding: 10px;
border-radius: 10px;
background-color: #3399FF;
color: #FFF;
}
button:hover {
background-color: orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TLC Driver Practice Quiz</title>
<link rel="stylesheet" href="css/tlc-style.css">
</head>
<body>
<div><h1>TLC Practice Quiz</h1></div>
<form>
<div class="questions">
<p>1. Which of the following is not a moving violation?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q1" value="Double Parking">Double Parking</li>
<li><input class="option" type="radio" name="q1" value="Tailgating">Tailgating</li>
<li><input class="option" type="radio" name="q1" value="Speeding">Speeding</li>
<li><input class="option" type="radio" name="q1" value="Failing to signal a turn">Failing to signal a turn</li>
</ol>
</div>
<div class="questions">
<p>2. What is the penalty for an aplicant of an TLC driver's license who test positive for drugs and fails the drug test?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q2" value="The aplicant must take the test again">The aplicant must take the test again</li>
<li><input class="option" type="radio" name="q2" value="The aplicant will have a provationary license">The aplicant will have a provationary license</li><li><input class="option" type="radio" name="q2" value="The aplicant will have the aplication denied">The aplicant will have the aplication denied</li>
<li><input class="option" type="radio" name="q2" value="The aplicant will have to drive carfolly">The aplicant will have to drive carfolly</li>
</ol>
</div>
<div class="questions">
<p>3. In wich situation may you pass a school bus with the red flashing light on?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q3" value="When it is snowing">When it is snowing</li>
<li><input class="option" type="radio" name="q3" value="When you do not see children around">When you do not see children around</li>
<li><input class="option" type="radio" name="q3" value="When someon behind beeps the horn">When someon behind beeps the horn</li>
<li><input class="option" type="radio" name="q3" value="Never">Never<br/>
</ol>
</div>
<div class="questions">
<p>4. Wich of the following is a service animal?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q4" value="A seeing eye dog">A seeing eye dog</li>
<li><input class="option" type="radio" name="q4" value="A guide dog">Aguide dog</li>
<li><input class="option" type="radio" name="q4" value="A signal dog">A signal dog</li>
<li><input class="option" type="radio" name="q4" value="All of the above">All of the above</li>
</ol>
</div>
<div class="questions">
<p>5. Which of the following is not a For-Hire base?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q5" value="Yellow taxi medallion base">Yellow taxi medallion base</li>
<li><input class="option" type="radio" name="q5" value="Black car base">Black car base</li>
<li><input class="option" type="radio" name="q5" value="Livery car service base station">Livery car service base station</li>
<li><input class="option" type="radio" name="q5" value="Luxury limousine base">Luxury limousine base</li>
</ol>
</div>
<div class="questions">
<p>6. Wich of the following is not correct?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q6" value="When you pick up a passenger, the vehicle should be 12 inches from yhe curb">When you pick up a passenger, the vehicle should be 12 inches from yhe curb</li>
<li><input class="option" type="radio" name="q6" value="When you pick up a passenger, the vehicle should be parallel to the curb">When you pick up a passenger, the vehicle shouldbe parallel to the curb</li>
<li><input class="option" type="radio" name="q6" value="If the passenger is waiting next to a car that is already parked, you should look for space within 100 ft.">If the passenger is waiting next to a car that is already parked, you should look for space within 100 ft.</li>
<li><input class="option" type="radio" name="q6" value="You are allowed to pick up in the crosswalk if the passenger is standing at the intersection">You are allowed to pick up in the crosswalk if the passenger is standing at the intersection</li>
</ol>
</div>
<div id="quizEnds"></div>
<button type="button" name="nextButton" id='next' value="Next">Next</button>
<button class="results" type="button" value="Results" onClick="getScore(this.form);">Results</button>
<!-- <button type="reset" value="Clear Answers">Clear Answers</button> -->
<div id="output"></div>
</form>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/tlcquizzapp.js"></script>
<script type="text/javascript" src="js/quizeffect.js"></script>
</body>
</html>
this is the button. Use closest() to traverse to the form it is within
Try
getScore($(this).closest('form')[0]);
Or simpler, give the form an id
<form id="myForm>
And use that id to target form
getScore($('#myForm')[0]);
You need to pass the form element to your getScore() function, but this.form does not represent the form element at that place in the code because it is inside the callback function passed to $questions.get(currentQuestion)).fadeOut(). At that point this refers to the question element. And even if you had a reference to the button element at that point, you could not get the form from it because the button has been removed from the page.
You could keep a reference to the form element in a variable where this does refer to the button element:
$('#next').click(function () {
var form = this.form;
And then use that when calling getScore():
getScore(form);
Inside a jQuery event function this refers to the element that the event is wired to. You therefore need to refer to the document.form[0], or use a jQuery version of the same.
Related
I am trying to make a quiz app with many questions and Yes or No answers.
So I made a design to make a radio button look like a button and for it to be checked if selected.
I also used javascript to make a slider for that questions.
So the problem is the checked design worked with the first question in the slider but would not work for the rest of the questions.
Here is my code, I don't think that the error in JS but I included it anyways.
const myslide = document.querySelectorAll('.myslide'),
dot = document.querySelectorAll('.dot');
let counter = 1;
slidefun(counter);
let timer = setInterval(autoSlide, 8000);
function plusSlides(n) {
counter += n;
slidefun(counter);
resetTimer();
}
function currentSlide(n) {
counter = n;
slidefun(counter);
resetTimer();
}
function resetTimer() {
clearInterval(timer);
timer = setInterval(autoSlide, 8000);
}
function slidefun(n) {
let i;
for(i = 0;i<myslide.length;i++){
myslide[i].style.display = "none";
}
for(i = 0;i<dot.length;i++) {
dot[i].className = dot[i].className.replace(' active', '');
}
if(n > myslide.length){
counter = 1;
}
if(n < 1){
counter = myslide.length;
}
myslide[counter - 1].style.display = "block";
dot[counter - 1].className += " active";
}
.txt input[type="radio"] {
opacity:0.011;
z-index:100;
}
.txt label {
padding:5px;
border:1px solid #000;
border-radius:10px;
cursor:pointer;
}
.txt label:hover {
background: rgb(238, 255, 5);
}
input[type="radio"]:checked + label {
background:yellow;
}
<div class="myslide fade">
<div class="txt">
<p>What is the question two ?</p>
<input id="yes" type='radio' name="result" value="yes">
<label for="yes">Yes</label>
<br>
<input id="no" type='radio' name="result" value="no">
<label for="no">No</label>
<br>
</div>
<img src="{% static 'img/img1.jpg'%}" style="width: 100%; height: 100%;">
</div>
<div class="myslide fade">
<div class="txt">
<p>What is the question one ?</p>
<input id="yes" type='radio' name="Question1" value="yes">
<label for="yes">Yes</label>
<br>
<input id="no" type='radio' name="Question1" value="no">
<label for="no">No</label>
<br>
</div>
<img src="{% static 'img/img1.jpg'%}" style="width: 100%; height: 100%;">
</div>
Thanks in advance
The problem is that your radio inputs can't have the same ids and have the labels target those same ids. Ids are supposed to be a unique occurrence in the DOM, and the labels are also supposed to reference those unique occurrences. So you need to change the id of the inputs and the for of the labels to correlate to each other specifically.
For example, changing them to "yes1 & no1, and yes2 & no2". This should solve your issue:
<p>What is the question one ?</p>
<input id="yes1" type='radio' name="Question1" value="yes">
<label for="yes1">Yes</label>
<br>
<input id="no1" type='radio' name="Question1" value="no">
<label for="no1">No</label>
and
<p>What is the question two ?</p>
<input id="yes2" type='radio' name="result" value="yes">
<label for="yes2">Yes</label>
<br>
<input id="no2" type='radio' name="result" value="no">
<label for="no2">No</label>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
Hi I made a quiz site and I can not make it display the answers I got correct and the image associated with the correct enough answers.
Here is my codepen: https://codepen.io/tovasfo/pen/veJdxd
<head>
<title>This quiz</title>
<link href="style.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<h1>Short canadian quiz</h1>
<h2>If you cheat it will take longer</h2>
<form id="quiz" name="quiz">
<p class="questions">What is our national animal?</p>
<input type="radio" id="mc" name="q1" value="Bed">Bed<br>
<input type="radio" id="mc" name="q1" value="Beaver">Beaver<br>
<input type="radio" id="mc" name="q1" value="Bed">It's not this<br>
<!-- // the answer is Beaver -->
<p class="questions">What is our national sport?</p>
<input type="radio" id="mc" name="q2" value="Hockey">Hockey<br>
<input type="radio" id="mc" name="q2" value="Tag">Tag<br>
<input type="radio" id="mc" name="q2" value="Poutine">Poutine<br>
<!-- // Hockey -->
<p class="questions">How many points are on the maple leaf on the flag?</p>
<input type="radio" id="mc" name="q3" value="75">75<br>
<input type="radio" id="mc" name="q3" value="9">9<br>
<input type="radio" id="mc" name="q3" value="11">11<br>
<!-- // 11 -->
<p class="questions">What alcholic beverage do we consume the most?</p>
<input type="radio" id="mc" name="q4" value="Wine">Wine<br>
<input type="radio" id="mc" name="q4" value="Beer">Beer<br>
<input type="radio" id="mc" name="q4" value="Red Bull">Red Bull<br>
<!-- // Beer -->
<p class="questions">What is the capital of canada?</p>
<input type="radio" id="mc" name="q5" value="Toronto">Toronto<br>
<input type="radio" id="mc" name="q5" value="Ottawa">Ottawa<br>
<input type="radio" id="mc" name="q5" value="Your Wrong City">Your Wrong City<br>
<!-- // Ottawa -->
<p class="questions">What was invented by a canadian?</p>
<input type="radio" id="mc" name="q6" value="French Fries Baby">French Fries Baby<br>
<input type="radio" id="mc" name="q6" value="Basketball Baby">Basketball Baby<br>
<input type="radio" id="mc" name="q6" value="I'm Sorry">I'm Sorry<br>
<!-- // Basketball baby -->
<p><input id="button" type="button" value="submit" onclick="check();"></p>
</form>
<div id="done">
<p id="correct"></p>
<p id="message"></p>
</div>
</body>
</html>
CSS
body {
font-family: sans-serif, arial;
}
#done {
visibility: hidden;
}
JavaScript
function check() {
var q1 = document.quiz.q1.value;
var q2 = document.quiz.q2.value;
var q3 = document.quiz.q3.value;
var q4 = document.quiz.q4.value;
var q5 = document.quiz.q5.value;
var q6 = document.quiz.q6.value;
var correct = 0;
if (q1 == "Beaver") {
correct++;
}
if (q2 == "Hockey") {
correct++;
}
if (q3 == "11") {
correct++;
}
if (q4 == "Beer") {
correct++;
}
if (q5 == "Ottawa") {
correct++;
}
if (q6 == "Basketball baby") {
correct++;
}
var messages = [
"YOU ARE UNSTOPPABLE!!!",
"Excellent work",
"You got most",
"It's alright",
"It's not good ahhhhh",
"Don't try and act dumb",
"Your so drunk"
];
var pictures = [
"img/socol.gif",
"img/tenor.gif",
"img/mity.gif",
"img/okay.gif",
"img/ohno.gif",
"img/dumb.gif",
"img/drunky.gif"
];
var range;
if (correct > 5) {
range = 0;
}
if (correct > 4 && correct < 6) {
range = 1;
}
if (correct > 3 && correct < 5) {
range = 2;
}
if (correct > 2 && correct < 4) {
range = 3;
}
if (correct > 1 && correct < 3) {
range = 4;
}
if (correct > 0 && correct < 2) {
range = 5;
}
if (correct < 1) {
range = 6;
}
document.getElementById("done").style.visiblity = "visible";
document.getElementById("correct").innerHTML =
"you got " + correct + " correct.";
document.getElementById("message").innerHTML = messages[range];
document.getElementById("picture").src = pictures[range];
}
This is all I have for now. I just want the quiz to actually function by giving the user how many answers he or she got right and the correct image.
You must include you javascript file on the bottom of the page try this and is gonna work
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Short canadian quiz</h1>
<h2>If you cheat it will take longer</h2>
<form id="quiz" name="quiz">
<p class="questions">What is our national animal?</p>
<input type="radio" id="mc" name="q1" value="Bed">Bed<br>
<input type="radio" id="mc" name="q1" value="Beaver">Beaver<br>
<input type="radio" id="mc" name="q1" value="Bed">It's not this<br>
<!-- // the answer is Beaver -->
<p class="questions">What is our national sport?</p>
<input type="radio" id="mc" name="q2" value="Hockey">Hockey<br>
<input type="radio" id="mc" name="q2" value="Tag">Tag<br>
<input type="radio" id="mc" name="q2" value="Poutine">Poutine<br>
<!-- // Hockey -->
<p class="questions">How many points are on the maple leaf on the flag?</p>
<input type="radio" id="mc" name="q3" value="75">75<br>
<input type="radio" id="mc" name="q3" value="9">9<br>
<input type="radio" id="mc" name="q3" value="11">11<br>
<!-- // 11 -->
<p class="questions">What alcholic beverage do we consume the most?</p>
<input type="radio" id="mc" name="q4" value="Wine">Wine<br>
<input type="radio" id="mc" name="q4" value="Beer">Beer<br>
<input type="radio" id="mc" name="q4" value="Red Bull">Red Bull<br>
<!-- // Beer -->
<p class="questions">What is the capital of canada?</p>
<input type="radio" id="mc" name="q5" value="Toronto">Toronto<br>
<input type="radio" id="mc" name="q5" value="Ottawa">Ottawa<br>
<input type="radio" id="mc" name="q5" value="Your Wrong City">Your Wrong City<br>
<!-- // Ottawa -->
<p class="questions">What was invented by a canadian?</p>
<input type="radio" id="mc" name="q6" value="French Fries Baby">French Fries Baby<br>
<input type="radio" id="mc" name="q6" value="Basketball Baby">Basketball Baby<br>
<input type="radio" id="mc" name="q6" value="I'm Sorry">I'm Sorry<br>
<!-- // Basketball baby -->
<p><input id="button" type="button" value="submit" onclick="check();"></p>
</form>
<div id="done">
<p id="correct"></p>
<p id="message"></p>
</div>
<script src="./main.js"></script> <======= Heare
</body>
</html>
main.js
function check() {
var q1 = document.quiz.q1.value;
var q2 = document.quiz.q2.value;
var q3 = document.quiz.q3.value;
var q4 = document.quiz.q4.value;
var q5 = document.quiz.q5.value;
var q6 = document.quiz.q6.value;
var correct = 0;
if (q1 == "Beaver") {
correct++;
}
if (q2 == "Hockey") {
correct++;
}
if (q3 == "11") {
correct++;
}
if (q4 == "Beer") {
correct++;
}
if (q5 == "Ottawa") {
correct++;
}
if (q6 == "Basketball baby") {
correct++;
}
var messages = [
"YOU ARE UNSTOPPABLE!!!",
"Excellent work",
"You got most",
"It's alright",
"It's not good ahhhhh",
"Don't try and act dumb",
"Your so drunk"
];
var pictures = [
"img/socol.gif",
"img/tenor.gif",
"img/mity.gif",
"img/okay.gif",
"img/ohno.gif",
"img/dumb.gif",
"img/drunky.gif"
];
var range;
if (correct > 5) {
range = 0;
}
if (correct > 4 && correct < 6) {
range = 1;
}
if (correct > 3 && correct < 5) {
range = 2;
}
if (correct > 2 && correct < 4) {
range = 3;
}
if (correct > 1 && correct < 3) {
range = 4;
}
if (correct > 0 && correct < 2) {
range = 5;
}
if (correct < 1) {
range = 6;
}
document.getElementById("done").style.visiblity = "visible";
document.getElementById("correct").innerHTML =
"you got " + correct + " correct.";
document.getElementById("message").innerHTML = messages[range];
document.getElementById("picture").src = pictures[range];
}
i made some code recently but im wondering how to make the quiz choose 3 questions out of 6 instead of displaying 6 straight away. Help would be appreciated. I want the quiz to choose 3 questions at random, then if its reloaded have a chance to choose another 3 questions, out of a total pool of 6.
<script language="JavaScript">
var numQues = 6;
var numChoi = 3;
var answers = new Array(6);
answers[0] = "16";
answers[1] = "8";
answers[2] = "The Walking Dead";
answers[3] = "Batman v Superman";
answers[4] = "Tupac";
answers[5] = "#ATAME2016";
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
break;
}
}
}
}
score = Math.round(score/numQues*100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
</script>
</head>
<body>
<form name="quiz">
1. How many movie trailers are on the movie page?<br>
<input type="checkbox" name="question1" value="10">10<br>
<input type="checkbox" name="question1" value="14">14<br>
<input type="checkbox" name="question1" value="16">16<br>
<p>
2. How many pages are on this website?<br>
<input type="checkbox" name="q2" value="8">8<br>
<input type="checkbox" name="q2" value="6">6<br>
<input type="checkbox" name="q2" value="7">7<br>
<p>
3. What's the most popular show this week?<br>
<input type="checkbox" name="q3" value="The Walking Dead">The Walking Dead<br>
<input type="checkbox" name="q3" value="Mandem on the wall">Mandem on the wall<br>
<input type="checkbox" name="q3" value="Cotchin with Ksara">Cotchin with Ksara<br>
<p>
4. What movie has made the most money this week in the box office?<br>
<input type="checkbox" name="q4" value="Ride along 2">Ride along 2<br>
<input type="checkbox" name="q4" value="Batman v Superman">Batman v Superman<br>
<input type="checkbox" name="q4" value="GasMan">GasMan<br>
<p>
5. Which star in the celebrity page is no longer alive?<br>
<input type="checkbox" name="q5" value="Tupac">Tupac<br>
<input type="checkbox" name="q5" value="50 Cent">50 Cent<br>
<input type="checkbox" name="q5" value="Bradley cooper">Bradley cooper<br>
<p>
6. What is our twitter account name (#)?<br>
<input type="checkbox" name="q6" value="#ATAME">#ATAME<br>
<input type="checkbox" name="q6" value="#ATAME2016">#ATAME2016<br>
<input type="checkbox" name="q6" value="#A2THETAME">#A2THETAME<br>
<p>
<input type="button" value="Get score" onClick="getScore(this.form)">
<input type="reset" value="Clear"><p>
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea>
</form>
</div>
You'll want to use a Math.random() function. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
A common example is found at: http://www.w3schools.com/jsref/jsref_random.asp
I'd try something like this, using jQuery:
// Hides all questions on page load.
$('.questions').hide();
// Randomly shows 3 questions.
for (var i=0; i<3; i++) {
var questionId = Math.floor((Math.random() * 6) + 1);
$('#question-' + questionId).show();
}
Then wrap your questions in wrapping <div> or <p> tags like this:
<div id="question-1" class="questions">
1. How many movie trailers are on the movie page?<br>
<input type="checkbox" name="question1" value="10">10<br>
<input type="checkbox" name="question1" value="14">14<br>
<input type="checkbox" name="question1" value="16">16<br>
</div>
Or this:
<p id="question-1" class="questions">
1. How many movie trailers are on the movie page?<br>
<input type="checkbox" name="question1" value="10">10<br>
<input type="checkbox" name="question1" value="14">14<br>
<input type="checkbox" name="question1" value="16">16<br>
</p>
I am trying to create a list with five list items. By default there is only the first item shown and if i press a button "Next one" it shows next list item (and so on).
After reaching to the last item button shoud be disabled because there is no list items left.
How can i achieve this kind of behavior?
I have found this example here: JavaScript - show next div and hide previous
but this one hides previous one.
Maybe it can be combined with "addclass" function to add class ul siblings that haveent got a class?
Thanks for help.
According with the link you attach, if you use the same code and removes the line qElems[i].style.display = 'none'; it works as you like. But will be better if you learn javascript before coding.
Complete example (extracted from JavaScript - show next div and hide previous with some editions )
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) {
showing[i] = 0;
if (i == showing.length - 1) {
document.getElementById("buttonNext").disabled = "disabled";
} 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()" id="buttonNext">Next Question</button>
I just made it using jquery:
$(document).on('click','button.next', function(){
var childID = $('#list li').index($('li.display'));
$('#list li:eq(' + childID + ')').toggleClass('display')
$('#list li:eq(' + ( childID + 1 ) + ')').toggleClass('display')
})
li{
display: none;
}
li.display{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li class="display">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button class="next">Next One</button>
Here is the HTML in which you create a list of five items, with first item is displayed by default and the rest is hidden.
html code
<div class='demo'>1</div>
<div class='demo' style='display:none;'>2</div>
<div class='demo' style='display:none;'>3</div>
<div class='demo' style='display:none;'>4</div>
<button class='next'>Next</button>
Here the button in action is next whenever you click the next button, it displays the next list item i.e on first click it would display second item and hides the rest. This will go on until the length of your list.
js code
var n = 2
$('.next').click(function(e){
$('.demo').hide();
$('.demo:nth-child('+n+')').show();
var demo_l = $('.demo').length;
if(n == demo_l){
$('.next').attr('disabled', 'disabled');
}
n++;
});
Here is the jsfiddle
I have a list that displays all the questions in a test randomly, but I am trying to have only some of the test display.
I tried making the length of the list shorter and outputting that way but it still dislpays all of the list. Any help is appreciated.
HTML
<!-- There are 40 questions but only want 30 to dislpay -->
<ol>
<li >
<p id = "question 1">What are the three main areas of the Standard User Interface?</p>
<ul type="none">
<li><input type="radio" name="q1" value="0" /> Header, Banner, Frame, Application Window</li>
<li><input type="radio" name="q1" value="0" /> Content Frame, Homepage, Form </li>
<li><input type="radio" name="q1" value="1" /> Application Navigator, Banner Frame, Content Frame </li>
<li><input type="radio" name="q1" value="0" /> Larry, Moe, and Curly</li>
</ul>
</li>
<li>
<p id = "question 2">In the User interface, what is the gray toolbar called which allows you to add bookmarks?</p>
<ul type="none">
<li><input type="radio" name="q2" value="0" /> Gauge</li>
<li><input type="radio" name="q2" value="1" /> Edge</li>
<li><input type="radio" name="q2" value="0" /> Remedy</li>
<li><input type="radio" name="q2" value="0" /> Banner</li>
</ul>
</li>
<li>
<p id = "question 3">What can be captured in an update set?</p>
<ul type="none">
<li><input type="radio" name="q3" value="0" /> Modified CI Rules</li>
<li><input type="radio" name="q3" value="1" /> Business Rules</li>
<li><input type="radio" name="q3" value="0" /> Scheduled Jobs</li>
<li><input type="radio" name="q3" value="0" /> None of these</li>
</ul>
</li>
</ol>
JavaScript
// Function that randomizes the test questions that are displayed along
// with the answers as soon as the page loads
function call_onLoad() {
var ol = document.querySelector('ol');
temp = ol.cloneNode(true);
for (var i = temp.children.length - 10; i >= 0; i--;) {
temp.appendChild(temp.children[Math.random() * i | 0]);
alert(temp.children.length);
}
ol.parentNode.replaceChild(temp, ol);
var ul = document.querySelectorAll('ul'),
parent;
alert("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]);
}
}
I figured out how to still randomize the questions and only output however much I wanted. I just put if(i>=30){
temp.removeChild(temp.children[Math.random() * i| 0])
} inside the for loop that was used to append the question list and it works. Not sure if this is the most optimal way but it works.
function call_onLoad() {
var ol = document.querySelector('ol');
temp = ol.cloneNode(true);
for (var i = temp.children.length - 10; i >= 0; i--;) {
temp.appendChild(temp.children[Math.random() * i | 0]);
alert(temp.children.length);
if(i>=30){
temp.removeChild(temp.children[Math.random() * i| 0])
}
}
ol.parentNode.replaceChild(temp, ol);
var ul = document.querySelectorAll('ul'),
parent;
alert("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]);
}
}