2

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>

3 respuestas 3

2

Lo tienes básicamente hecho, apenas te falta un pequeño cambio. Ya tienes el código que "resetea" el formulario de preguntas (dentro de un else en el controlador del evento click para el botón "next"):

next.disabled = true;
check.disabled =false;
imageWrong.style.display = "none";
imageCorrect.style.display = "none";
activeInputs();

El problema es que no lo estás llamando cuando se le da a empezar de nuevo porque en ese momento el valor de actualQuestion es el mismo que el número de preguntas y por eso siempre entra en la condición del if y no en la del else.

Teniendo en cuenta que sólo se entra en el if cuando el quiz ha terminado, una solución rápida sería quitar el else y hacer que su código se ejecute siempre cuando se llega a ese punto, y dentro del if indicar que el número de pregunta es igual a 0 (cero).

El código con esos dos cambios:

//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;
        
        // resetear el número de pregunta a 0
        actualQuestion = 0;
    }
    
    // quitamos el else para que esta parte se ejecute siempre
    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>

2

Para reiniciar el cuestionario, hice una función denominada reiniciar_entradas. Esta función es llamada por next y start. Todo lo que había en el else de next lo pasé a esa función, y además cambié el texto de next. Al finalizar el juego, el texto cambia a Result!, pero nunca más vuelve a cambiar a Next!... Entonces la modificación que hice fue para que lo cambie otra vez al finalizar.

Para simplificar las cosas, quité todos los estilos y Bootstrap, pero si quieres, puedes agregarlo nuevamente. Hice una simplificación de todo el código, cambiando la estructura de la variable fill.

Cambié las imágenes porque eran demasiado grandes, pienso que reduciría el tiempo de carga del sitio (sería más responsivo), y otra cosa que noté fue que en las dos imágenes dice alt="correct", cuando una debería ser correct y otra wrong.

Al quitar Bootstrap y reducir un poco los estilos, no quedó tan elegante, pero por lo menos funciona... En el input de seleccionar la respuesta, también noté que se superpone con el botón original, así que supongo que tendría que ocultarlo, haciendo más grande el seleccionador, o de alguna otra manera.

Código:

function arrays(index) {
  var quest = preguntas[index];
  title.textContent = "Pregunta "+(index+1);
  redact.textContent = quest.pregunta;
  for(var i in quest.opciones)
  {
    document.getElementById(
      "option"+(+i+1)
    ).textContent = quest.opciones[i];
  }
  message.style.display = 'none';
}
function reiniciar_entradas(){
    next.disabled = true;
    check.disabled =false;
    wrong.style.display = "none";
    correct.style.display = "none";
    activeInputs()
    arrays(actualQuestion);
}
function disabledInputs() {
  for (var i = 0; i < input.length; i++) {
    input[i].disabled = true;
  }
}
function activeInputs() {
  for (var i = 0; i < input.length; i++) {
    input[i].disabled = false;
  }
}

start.addEventListener('click', function() {
  first.style.display = 'none';
  question.style.display = "block";
  next.textContent = "Siguiente";
  reiniciar_entradas()
});
next.addEventListener('click', function() {
  if (actualQuestion === numQuestions) {
    var score = document.getElementById("score");
    result.style.display = "block";
    question.style.display = "none";
    score.textContent = points;
  } else {
    reiniciar_entradas()
  }
})
check.addEventListener('click', function() {
  var choose = document.querySelector('input[type=radio]:checked');
  if (!choose) {
    message.style.display = 'block';
  } else {
    var value = choose.value;
    if (preguntas[actualQuestion].respuesta == value) {
      correct.style.display = "block";
      disabledInputs()
      points += 20;
    } else {
      wrong.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 = "Resultado";
    }
  }
})
again.addEventListener('click',function(){
  result.style.display="none";
  first.style.display="block";
  actualQuestion=0;
  points = 0;
  arrays(actualQuestion)
});

var preguntas = [
  {respuesta:3,"pregunta":"¿Cuál es el primer lenguaje de alto nivel?",
    "opciones":["Ada","C","Fortran","Java"]},
  {respuesta:3,"pregunta":"¿Qué son if, else, for y while son?",
    "opciones":["Funciones","Tipos de datos","Sentencias de control","Todos"]},
  {respuesta:4,"pregunta":"¿Cuánto es 1010 de binario?",
    "opciones":["8","65","97","Ninguno"]},
  {respuesta:2,"pregunta":"int, char, float, string y boolean son...",
    "opciones":["Sentencias","Tipos de datos","Funciones","Instrucciones"]},
  {respuesta:2,"pregunta":"¿Qué es EOF?",
    "opciones":["Empty or full","End of file","End of find","Ninguno"]}
]
var general = {}
var input     = document.querySelectorAll('.inputs input[type="radio"]')
var contenedor= document.querySelector(".contenedor")
var question  = document.querySelector(".question")
var actualQuestion = 0;
var points = 0;
var numQuestions = preguntas.length;
arrays(actualQuestion);
body{
  background: -webkit-linear-gradient(#A4BFAA,#FFD6CA)
}
h1 {
    font-family: 'Rock Salt', cursive;
    font-weight: bold;
    text-align: center;
    background: -webkit-linear-gradient(top, #E5A46A, grey);
}
h2 {
    font-weight: bold;
}
.contenedor {
    font-family: 'VT323', monospace;
    display: block;
    text-align: center;
    background: #11BBFFAA;
}
h3 {
    font-weight: bold;
}
input[type='radio']:after {
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: inline-block;
    visibility: visible;
}
input[type='radio']:checked:after {
    position: relative;
    background-color: #4F8ABF;
    content: '';
    display: inline-block;
    visibility: visible;
}
.wrong, .correct, .result, .question{
    display: none;
}
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Quiz Game</title>
</head>
<body>
  <div class="container">
    <header class="row">
      <div class="col">
      </div>
    </header><!-- /header -->
    <main class="row contenedor p-3 ">
      <div class="col">
        <div class="col-12">
        <div class="row question">
<button class="btn btn-danger mt-4 check" id="check">¡Comprobar!</button> <button class=" btn btn-outline-dark mt-4  next" id="next" class="result">¡Siguiente!</button>
<p id="message" class="message">Debes responder la pregunta para continuar.</p>
<center>
<img alt="correct" class="correct" id="correct" src ="http://submarinobursatil.com/imagenes/landings/icon-3-llaves.png" />
<img alt="wrong" class="wrong" id="wrong" src="http://www.fmatlanticselva.com.ar/img/admin/cruz.png" /></center>
          <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>
              <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>
              <input id="answer4" name="select" class="selects" type="radio" value="4"><label class="select" for="answer4"><span id="option4"></span></label>
            </div>
          </div>
        </div>
        <div class="col result" id="result">
		  <h2>Gracias por jugar</h2> 
		  <p class="mb-3">Tu puntaje es: <a id="score"></a></p>
		  <button class="btn btn-success mt-4  next" id="again" class="result">¡Jugar denuevo!</button>
        </div>
        <div id="first" class="row">
          <div class="col">
          <p class="introduction">El juego consiste en responder las preguntas que aparecen como opciones, usted debe obtener buenos resultados.</p>
          <h3>¿Estás listo?</h3><button class="btn btn-primary btn-large" id="start">¡Comenzar!</button>
        </div>
        </div>
      </div>
	</div>
  </main>
  </div>
</body>

-1

para reiniciar utiliza: window.location = '/';
Donde '/' es la página de inicio (home ó index). Si es para otra: '/otrapagina'.

En el último botón agrega una funcion javascript:

<button class=" btn btn-success mt-4  next" id="again" class="result" onclick="reiniciar()">Play Again!</button>

y el script sería:

<script>  
function reiniciar() {                          
window.location = '/';             
}        
</script>
1
  • 2
    El autor pidió reiniciar el formulario, no cargar toda la página de nuevo!
    – Mariano
    Commented el 12 mar. 2018 a las 1:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.