Make a javascript quiz in under 15 lines of code, Very simple javascript quiz tutorial...

preview_player
Показать описание
Hope you understand the code, i know how hard a single line of code can be when you don't get it, so go on and ask me any javascript question you want!!!

And subscribe if you want to see more simplified tutorials!!!

Leave a like!

Update: unfortunately, I have lost the code in the video. I should have added it in the description or at least linked to it. Lesson learned, though.
Рекомендации по теме
Комментарии
Автор

I am not able to get it to work. It always returns a value of 0 once i hit the submit button.
Could you offer some assistance? Below is the html code and the Javascript code.

HTML
<div>

<h2>Who lost his riches, health, friends, and family, but remained faithful to God in his afflictions?</h2>
<input id="first" type="radio" name="firstQuestion" value="false">Noah</input>
<input id="second" type="radio" name="firstQuestion" value="true">Job</input>
<input id="third" type="radio" name="firstQuestion" value="false">Moses</input>
<input id="fourth" type="radio" name="firstQuestion" value="false">Daniel</input>

<br>

<h2>What gave Samson his unusual strength?</h2>

<input id="fifth" type="radio" name="secondQuestion" value="false">Goliath</input>
<input id="sixth" type="radio" name="secondQuestion" value="false">Working out at the guy</input>
<input id="seventh" type="radio" name="secondQuestion" value="true">Hair</input>
<input id="eighth" type="radio" name="secondQuestion"

<br>

<h2>Who was the first man created on earth?</h2>

<input id="ninth" type="radio" name="thirdQuestion" value="false">Noah</input>
<input id="one" type="radio" name="thirdQuestion" value="true">Adam</input>
<input id="tenth" type="radio" name="thirdQuestion" value="false">Abraham</input>
<input id="eleventh" type="radio" name="thirdQuestion" value="false">Moses</input>

<br>

<h2>Who killed the giant Philistine, Goliath, and saved Israel from captivity?</h2>

<input id="twelfth" type="radio" name="fourthQuestion"
<input id="thirteenth" type="radio" name="fourthQuestion" value="true">David</input>
<input id="fourteenth" type="radio" name="fourthQuestion" value="false">Moses</input>
<input id="fifteenth" type="radio" name="fourthQuestion" value="false">Nathan</input>
<br>

<input type="button" value="Submit" onclick="submitted()"/>
</div>
<p id="firstParagraph"></p>
<p id="secondParagraph"></p>




<script type="text/javascript" src="app.js"></script>
</body>

</html>



Javascript portion

var firstQuestion =
var secondQuestion =
var thirdQuestion =
var fourthQuestion =

var myArr =[firstQuestion, secondQuestion, thirdQuestion, fourthQuestion];
var score = 0;
var firstParagraph =
var secondParagraph =

function submitted()
{
for(var i = 0;i<myArr.Length;i++)
{
for(var o = 0;o<firstQuestion.Length; o++)

{
if(myArr[i][o].value == "true" && myArr[i][o].checked)
{
firstParagraph.innerHTML = "You got question " + (i+ 1) + " correct!";
score++;
}
};
};

var showScore = Math.round((score/4)*100) ;
secondParagraph.innerHTML = showScore;
}

piedpiper
Автор

Hello, I like this quiz, could you send me the full code?

oldguitarist-pl
Автор

Hlo sir can you plz tell me which platform u use a run notepad Codding....bzc I had done the Codding but I have no results...and I'm run the code Google Chrome...but I had no results so plzz tell me sir

Tk-sknv
Автор

Im trying to get this to work but unable to. When i hit the submit button it just shows a value of 0.

Below is the HTML and the Javascript

HTML

<div>

<h2>Who lost his riches, health, friends, and family, but remained faithful to God in his afflictions?</h2>
<input id="first" type="radio" name="firstQuestion" value="false">Noah</input>
<input id="second" type="radio" name="firstQuestion" value="true">Job</input>
<input id="third" type="radio" name="firstQuestion" value="false">Moses</input>
<input id="fourth" type="radio" name="firstQuestion" value="false">Daniel</input>

<br>

<h2>What gave Samson his unusual strength?</h2>

<input id="fifth" type="radio" name="secondQuestion" value="false">Goliath</input>
<input id="sixth" type="radio" name="secondQuestion" value="false">Working out at the guy</input>
<input id="seventh" type="radio" name="secondQuestion" value="true">Hair</input>
<input id="eighth" type="radio" name="secondQuestion"

<br>

<h2>Who was the first man created on earth?</h2>

<input id="ninth" type="radio" name="thirdQuestion" value="false">Noah</input>
<input id="one" type="radio" name="thirdQuestion" value="true">Adam</input>
<input id="tenth" type="radio" name="thirdQuestion" value="false">Abraham</input>
<input id="eleventh" type="radio" name="thirdQuestion" value="false">Moses</input>

<br>

<h2>Who killed the giant Philistine, Goliath, and saved Israel from captivity?</h2>

<input id="twelfth" type="radio" name="fourthQuestion"
<input id="thirteenth" type="radio" name="fourthQuestion" value="true">David</input>
<input id="fourteenth" type="radio" name="fourthQuestion" value="false">Moses</input>
<input id="fifteenth" type="radio" name="fourthQuestion" value="false">Nathan</input>
<br>

<input type="button" value="Submit" onclick="submitted()"/>
</div>
<p id="firstParagraph"></p>
<p id="secondParagraph"></p>




<script type="text/javascript" src="app.js"></script>
</body>

</html>




Javascript


var firstQuestion =
var secondQuestion =
var thirdQuestion =
var fourthQuestion =

var myArr =[firstQuestion, secondQuestion, thirdQuestion, fourthQuestion];
var score = 0;
var firstParagraph =
var secondParagraph =

function submitted()
{
for(var i = 0;i<myArr.Length;i++)
{
for(var o = 0;o<firstQuestion.Length; o++)

{
if(myArr[i][o].value == "true" && myArr[i][o].checked)
{
firstParagraph.innerHTML = "You got question " + (i+ 1) + " correct!";
score++;
}
};
};

var showScore = Math.round((score/4)*100) ;
secondParagraph.innerHTML = showScore;
}

piedpiper
Автор

I can't see all of the code clealy, and you don't show the top of the code, can you post it in the description, of make a download link?

jinx_ila