Untitled

-------------------------------------HTML------------------------------------
<!DOCTYPE html>
<html>
      <head>
           <meta charset="UTF-8"/>
           <title> Quiz </title>
           <link rel="stylesheet" href="file:///C:/Users/Irisio/Desktop/Quiz/Stylesheet.css">

      </head>

      <body>
      <div id="container" class="title"
       <div class="title"> Quiz sur l'athlétisme </div>
       <div id="question" class="question"></div>
       <label class="option"><input type="radio" name="option" value="1" /> </span id="opt1"></label>
        <label class="option"><input type="radio" name="option" value="2" /> </span id="opt2"></label>
        <button id="nextButton" class="next-btn" onclick="prochainequestion();"> Prochaine Question </button>
        </div>
        <div id="result" class="container result" style="display:none;">
        </div>
        <script src="file:///C:/Users/Irisio/Desktop/Quiz/questions.js"> </script>
        <script src="file:///C:/Users/Irisio/Desktop/Quiz/quiz.js"></script>
      </body>
</html>

-------------------------------------questions.js------------------------------------
var questions = [{
	"question" : "Usain Bolt est -il le recordman  du 100m en 9. 58 ?",
	"option1" : "Vrai",
	"option2" : "Faux",
	"answer" : "1"
}
,
{
     "question" : "Christophe Lemaitre est il le recordman du 200m en 19. 19 ?",
     "option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "2"
}
,
{
     "question" : "Wayde Van Niekerk est -il le recordman du 400m en 43. 03 ?",
     "option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "1"
}
,
{
     "question" : "Bernard Lagat est-il le recordman du 1500m en 3 : 26. 00 ?",
     "option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "2"
}
,
{
	"question" : "Kenenisa Bekele est-il  le recordman du 5000m en 12 : 37. 35 ?",
	 "option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "1"
}
,
{
	"question" : "Mohamed Farah est-il le  recordman du 10000m en 26 : 17. 53 ?",
	 "option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "2"
}
,
{
	"question" : "Dennis Kimetto est-il le recordman  du marathon en 2 h 02 min 57 s ?",
	 "option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "1"
}
,
{
	"question" : "Aries Merritt est-il le recordman du 110m haies en 12. 80 ?",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "1"
}
,
{
   "question" : "Stéphane Diagana  est-il le  recordman du 400m haies en 46. 78 ?",
   "option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "2"
}
,
{
	"question" : "Saif Saaeed Shaheen est-il le recordman du 3. 000m Steeple en 7 : 53. 63 ?",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "1"

}
,
{
	"question" : "Javier Sotomayor  est-il le  recordman du saut en hauteur avec 2m45 ?",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "1"
}
,
{
	"question" : "Carl Lewis est-il le  recordman du saut en longueur avec 8m95 ?",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "2"
}
,
{
	"question" : "Renaud Lavillenie est-il le recordman du saut à la perche avec 6m16 ?",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "1"
}
,
{
	"question" : "Teddy Tamgho Qui est recordman du monde du triple saut avec 18m29 ?",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "2"
}
,
{
	"question" : "Reese Hoffa Qui est recordman du monde du lancer du poids avec 23m12 ? ",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "2"
}
,
{
	"question" : "Jürgen Schult est-il le  recordman  du lancer du disque avec 74m08 ?",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "1"
}
,
{
	"question" : "Ivan Tsikhan est-il le  recordman du lancer du marteau avec 86m74 ?",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "2"
}
,
{
	"question" : "Steeve Backley est-il le recordman  du lancer du javelot avec 98m48 ?",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "2"
}
,
{
	"question" : "Ashton Eaton  est-il recordman du décathlon avec 9039 pts ?",
	"option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "1"
}
,
{
	"question" : "Yusuke Suzuki  est-il le recordman du 20km marche en 1 h 16 min 36 s ?",
    "option1" : "Vrai",
	 "option2" : "Faux",
	 "answer" : "1"
}

-------------------------------------quiz.js------------------------------------
var currentQuestion = 0;
var score = 0;
var totQuestions = question.lenght;

var container = document.getElementById('quiz');
var questionEl = document.getElementById('question');
var opt1 = document.getElementById('opt1');
var opt2 = document.getElementById('opt2');
 var nextButton = document.getElementById('nextButton')
 var result = document.getElementById('result')


function loadQuestion (questionIndex) {
var q = question[questionIndex];
questionEl.textContent = (questionIndex + 1) + '. ' + q.question;
opt1.textContent = q.option1;
opt2.textContent = q.option2;
};

function prochainequestion () {
var selectedOption = document.querySelector('input[type=radio]:checked');
if (!selectedOption) {
	alert('Veuillez séléctionnez votre réponse')
	return;
}
var answer = selectedOption.value;
if(question[currentQuestion].answer == answer){
	score +=10;
}
selectedOption.checked = false;
currentQuestion++;
if(currentQuestion == totQuestions -1){
	nextButton.textContent = 'Finish';
}
if (currentQuestion == totQuestions){
	container.style.displan = 'none';
	resultCont.style.display = '';
	resultCont.textContent = 'Ton score est de :' + score;
	return;
}
loadQuestion(currentQuestion);
}

loadQuestion(currentQuestion);

-------------------------------------Steelsheet.css------------------------------------
body {background-image: url("file:///C:/Users/Irisio/Desktop/Quiz/athl%C3%A9tisme.png")}
body {background-size: cover;}
body {background-repeat: no-repeat;}


.title{
padding-top: 20px;
text-align: center;
font-size: 35px;
text-transform: uppercase;
font-weight: bold;

}

.question{
padding: 20px;
font-size: 22px;
color: white;
border-radius: 20px;
margin: 10px 0 10px 0;
margin-top: 10%;
height:20%;
background:black;
text-align: center;

}

.option{
	width: 471px;
	display: inline-block;
	padding: 10px 0 10px 15px;
	vertical-align: middle;
	margin : 10px 0 10px 10px;
	border-radius: 20px;
	background: black;
	margin-left:15%;

}

.option:hover{
background: white;
color: black;

}

.next-btn{
margin-top:5%;
margin-left:47%;
background-color:black;
color: white;
border-radius: 50px;
width : 100px;
height: 100px;
}

.next-btn:hover{
background-color: white;
color: grey;
cursor: pointer;
}

.result{
height: 100px;
text-align:center;
font-size: 75px;
}

.option input:checked .option{
background: yellow;
color: black;
}