Quiz Application in JS - Part 2/2 | JavaScript Tutorials | Web Development Tutorials

Learn to develop simple quiz application in JS using HTML, CSS.

Source Code for "Quiz Application in JS":

[jsnode]

I like such kind of instructor when they explained you one by one line of the code.

[davidbermudez]

Thank you very much just what I needed for my project

[mcslaughta]

how come in your script querySelector is not highlighted but in mine it is. Also the same for var answer = selectedOption.value; the value tag is not highlighted for me and is for you?

[kaylinnaidoo]

Instead of using stye=" display :none", how else could be hide the page ?

[anikettilgule]

I like the way you describe :) sir I have questions array like : questions = [
{
id: 'Q-101',
title: 'What is India\'s capital?',
type: 'radiogroup',
options: ['Delhi', 'Mumbai', 'Kolkatta', 'Pune']
},
{
id: 'Q-102',
title: "Grand Central Terminal, Park Avenue, New York is the world's?",
type: 'radiogroup',
options: ['largest railway station', 'highest railway station', 'longest railway station', 'None of the above']
},
{
id: 'Q-103',
title: 'Entomology is the science that studies?',
type: 'dropdown',
options: ['Behavior of human beings', 'Insects', 'The origin and history of technical and scientific terms', 'The formation of rocks']
},
]

and depending on the type we have to display either radio or dropdown.
Can you please guide me how to achieve this

[bw]

How would you make it so the next question appears without the next question button? For example, I want the page to alert the correct answer upon pressing an answer and then move on to the next question?

[muhammadatiq]

Dear sir, How can we add previous button functionality in this coding.. suppose by mistake i have checked wrong answer and click on next but i want to back... and i want store these answer in mysql database ..plz give me the code for that situation....

[willmgg]

Thank you very much, this was very a helpful tutorial

[hsphoon]

Is this css working?
.option input:checked .option {
background: #08038C;
color: #000;
}
After I checked a radio button, the background of the label is not changed.

[TimeWaveOfficial]

Hey very good video, but what can i do if the value text in the array is too long (btw i have set other questions)
In my quiz the text is flowing out of the div

[abinayag]

sir i would try to do your coding sir but the questions and options are not display automatically and the next button is not working please help me sir.. send the coding for my mail its very usefull for me sir.. iam doing my project so help me...

[paulstanlev]

Wonder full. i got successfull code in your video Sir Thank you so much. If different marks in each quiz How is Code. if function to use it Sir Please Thanks...

[hassanshaaban]

hello the questions and options are not displayed so can you help me and the source code is not downloaded anymore

[allisontpowell]

Could you maybe explain how to make a retake button.. re executing the quiz

[eneassenna]

Olá obrigado mesmo pelo conteúdo me ajudou bastante a resolver problemas de meu projeto valeu.

[fredrey]

I have finish completing this but why doesn't the questions and options come up??

[jaysonng]

The source code download link doesn't work for me. Gets stuck on "Requesting..." and nothing happens.

[remuelsantos]

bro can you help me in my code the queston is not appear even i type the last code i copy all your code

[sakshisamdani]

i cannot download the source code from the link. please can u fix the problem

[codewithpavana]

Hey !! ur tutorial is very nice but i have doubt where u have taken the value of the questionIndex and even u did not declared the questionIndex at the top . Pleas once clarify the doubt.
var questionIndex = 0;
var questions = [];
$.ajax({
type:'GET',
async:true,
dataType: "json",
success: function(data)
{
questions = data ;
loadQuestion();
}
});
function loadQuestion(){
//questionIndex = 0;
var questionEl =
var opt1 =
var opt2 =
var opt3 =
var opt4 =

questionEl.innerHTML = (questionIndex + 1) + '. '+
opt1.innerHTML =
opt2.innerHTML =
opt3.innerHTML =
opt4.innerHTML =
console.log("questions")
}
var currentQuestion = 0;
var score = 0;
var totalQuestions = questions.length;
var container =
var nextButton
var resultCont =


function loadNextQuestion() {
var selectedOption =
if(!selectedOption){
alert('Please select your answer!');
return;
}
var answer = selectedOption.value;
== answer){
score += 10;
}
selectedOption.checked = false;
currentQuestion++;


if(currentQuestion == totQuestions - 1){
nextButton.textContent = 'Finish';
}


if(currentQuestion == totQuestions){
container.style.display = 'none';
resultCont.style.display = '';
resultCont.textContent = 'Your Score: ' + score;
return;
}

}

I am not getting anther question only first question is displaying can u tell me the error.First question is displaying but next question is not displaying. pls clarify . Thank you for the tutorial :-)