Me encuentro haciendo mi quiz y lo que pasa es que quiero lograr que cuando llegue al cuadro de resultado donde aparece el puntaje, le de al botón de "Play Again" y me vuelva a reiniciar el quiz, que me lo mande a la primera página que apareció al principio.
Si lo prueban, de hecho, se va a la principal y me va a las preguntas luego, pero al momento de entrar a las preguntas la imagen no se quita y los botones están deshabilitados. Quiero que se me vuelva a poner como si hubiera recargado la página.
Éste es mi código:
//array of Html fills
let fill = [{
"title": "QUESTION 1",
"question": "It is considered that the first high-level language was?",
"option1": "Ada",
"option2": "C",
"option3": "Fortran",
"option4": "Java",
"answer": "3"
}, {
"title": "QUESTION 2",
"question": "if, else, for and while are?",
"option1": "Data access functions",
"option2": "Type of data",
"option3": "Control statements",
"option4": "all of the above",
"answer": "3"
}, {
"title": "QUESTION 3",
"question": "The number 1010 in binary is represented in decimal as?",
"option1": "8",
"option2": "65",
"option3": "97",
"option4": "None of the above",
"answer": "4"
}, {
"title": "QUESTION 4",
"question": "int, char, float, string y boolean are?",
"option1": "Control statements",
"option2": "Type of data",
"option3": "Data acess functions",
"option4": "Data access instructions",
"answer": "2"
}, {
"title": "QUESTION 5",
"question": "What does EOF mean?",
"option1": "Empty or full",
"option2": "End of file",
"option3": "End of loop",
"option4": "None of the above",
"answer": "2"
}]
//images wrong or correct
let imageCorrect = document.getElementById("correct");
let imageWrong = document.getElementById("wrong");
//variables general
let body = document.getElementsByTagName('body')[0];
let first = document.getElementById("first");
let contenedor = document.getElementsByClassName("contenedor")[0];
let question = document.getElementsByClassName("question")[0];
let title = document.getElementById("title");
let paragraph = document.getElementById("redact");
let option1 = document.getElementById("option1");
let option2 = document.getElementById("option2");
let option3 = document.getElementById("option3");
let option4 = document.getElementById("option4");
let message = document.getElementById("message");
let button = document.getElementById("start");
let check = document.getElementById("check");
let next = document.getElementById("next");
let result = document.getElementById("result");
let input = document.querySelectorAll('.inputs input[type="radio"]');
let again = document.getElementById("again")
// points and question variables
let actualQuestion = 0;
let points = 0;
let numQuestions = fill.length;
// init page
body.addEventListener('load', start(), false);
function start() {
question.style.display = 'none';
// listener button
button.addEventListener('click', function() {
first.style.display = 'none';
contenedor.style.background = '#FFA54F';
question.style.display = 'block';
next.disabled = true;
});
}
// fill html
function arrays(index) {
let quest = fill[index];
title.textContent = quest.title;
paragraph.textContent = quest.question;
option1.textContent = quest.option1;
option2.textContent = quest.option2;
option3.textContent = quest.option3;
option4.textContent = quest.option4;
message.style.display = 'none';
}
// check answer
function nextQuestion() {
let choose = document.querySelector('input[type=radio]:checked');
if (!choose) {
message.style.display = 'block';
message.textContent = "Please answer the question";
message.style.marginTop = "20px";
message.style.fontSize = "0.7em";
} else {
let value = choose.value;
if (fill[actualQuestion].answer == value) {
imageCorrect.style.display = "block";
disabledInputs()
points += 20;
} else {
imageWrong.style.display = 'block';
disabledInputs()
}
if ((choose.checked)) {
message.style.display = "none";
next.disabled = false;
check.disabled = true;
}
choose.checked = false;
actualQuestion++;
if (actualQuestion === numQuestions) {
next.textContent = "Result";
}
}
}
//button next
next.addEventListener('click', function() {
if (actualQuestion === numQuestions) {
let score = document.getElementById("score");
question.style.display = 'none';
contenedor.style.background = "#FFAE75";
result.style.display = "block";
score.textContent = "Your score " + points;
} else {
next.disabled = true;
check.disabled =false;
imageWrong.style.display = "none";
imageCorrect.style.display = "none";
activeInputs()
arrays(actualQuestion);
}
})
//disabled buttons after answer
function disabledInputs() {
for (let i = 0; i < input.length; i++) {
input[i].disabled = true;
}
}
//active next question
function activeInputs() {
for (let i = 0; i < input.length; i++) {
input[i].disabled = false;
}
}
// check the answer
check.addEventListener('click', nextQuestion)
again.addEventListener('click',function(){
result.style.display="none";
first.style.display="block";
actualQuestion=0;
points = 0;
arrays(actualQuestion)
});
arrays(actualQuestion);
@import url('https://fonts.googleapis.com/css?family=Rock+Salt|VT323');
body{
background: -webkit-linear-gradient(#A4BFAA,#FFD6CA)
}
h1 {
font-family: 'Rock Salt', cursive;
font-size: 3em;
font-weight: bold;
text-align: center;
background: -webkit-linear-gradient(top, #E5A46A, grey);
margin: 0;
margin-bottom: 50px;
padding: 20px 10px;
}
h2 {
font-weight: bold;
font-size: 3em;
margin-bottom: 20px;
}
.contenedor {
font-family: 'VT323', monospace;
display: block;
border: 4px solid black;
max-width: 500px;
margin: 0 auto;
text-align: center;
background: #FF7163;
padding: 40px;
outline: 4px dotted black;
outline-offset: 10px;
}
.introduction {
font-size: 1.5em;
line-height: 25px;
margin-bottom: 20px;
}
h3 {
font-weight: bold;
font-size: 2em;
margin-bottom: 30px;
}
button {
width: 100px;
margin-bottom: 30px;
}
.question, #score {
font-size: 1.5em;
}
.inputs {
text-align: left;
font-size: 0.8em;
}
label {
margin-left: 10px;
}
input[type='radio'] {
margin-left: 60px;
}
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -3px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #4F8ABF;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
.image {
max-width: 80px;
margin-top: 40px;
}
.correct, .wrong, .result {
display: none;
}
p .message {
font-size: 0.5em;
margin-top: 20px;
display: none;
}
@media(max-width: 475px) {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.3em;
margin-bottom: 15px;
}
.introduction {
font-size: 1em;
text-align: center;
line-height: 12px;
}
button {
width: 60px;
margin-bottom: 15px;
}
.redact {
font-size: .7em;
line-height: 12px;
}
.inputs {
font-size: .6em;
width: 100px;
}
input[type='radio'] {
margin-left: 25px;
}
p .message {
font-size: .5em;
}
.image {
max-width: 50px;
margin-top: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Quiz Game</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="row">
<div class="col">
<h1>Quiz Game</h1>
</div>
</header><!-- /header -->
<main class="row contenedor p-3 ">
<div class="col">
<div class="row question">
<div class="col-12">
<h3 id="title"></h3>
</div>
<div class="col-12">
<p class="redact" id="redact"></p>
</div>
<div class="row p-0">
<div class=" col-xs-11 col-8 p-0 inputs">
<input id="answer1" name="select" class="selects" type="radio" value="1"><label class="select" for="answer1"><span id="option1"></span></label><br>
<input id="answer2" name="select" class="selects" type="radio" value="2"><label class="select" for="answer2"><span id="option2"></span></label><br>
<input id="answer3" name="select" class="selects" type="radio" value="3"><label class="select" for="answer3"><span id="option3"></span></label><br>
<input id="answer4" name="select" class="selects" type="radio" value="4"><label class="select" for="answer4"><span id="option4"></span></label>
</div>
<div class=" col-4 col-xs-1 p-0 images"><img alt="correct" class="image correct" id="correct" src ="https://www.matrixinternet.ie/wp-content/uploads/2014/09/Check-300x300.png"> <img alt="correct" class="image wrong" id="wrong" src="https://i2.wp.com/mettagiri.com/wp-content/uploads/2017/01/cancel-1174809_1280.png?fit=728%2C728&ssl=1"></div>
<div class="col-12">
<p id="message" class="message"></p>
</div>
<div class="col-6">
<button class=" btn btn-danger mt-4 check" id="check">Check!</button>
</div>
<div class="col-6">
<button class=" btn btn-outline-dark mt-4 next" id="next" class="result">Next!</button>
</div>
</div>
</div>
<div class="col result" id="result">
<h2>Thanks For play</h2>
<p id="score" class="mb-3"></p>
<button class=" btn btn-success mt-4 next" id="again" class="result">Play Again!</button>
</div>
<div id="first" class="row">
<div class="col">
<h2>Welcome to Quiz Game</h2>
<p class="introduction">The game consists of answering the questions that will appear as you answer, once you have finished answering, you will get your results</p>
<h3>ARE YOU READY?</h3><button class="btn btn-primary btn-large" id="start">Start!</button>
</div>
</div>
</div>
</main>
</div>
<script src="js/index.js">
</script>
</body>
</html>