I have a problem with this code. It's a word game. It consists of guessing the words. I have two buttons, one to validate (validates if the answer is correct or not) and another that passes the turn. In the end, when it asks the unanswered questions again (clicked with the pass word button) it only shows me again the questions that have been wrong/correct and it would have to show me the ones that have missed the word. Something is escaping me.
this is my code:
var questions = [
{ letter: "a", answer: "abducir", status: 0, question: ("CON LA A.") },
{ letter: "b", answer: "bingo", status: 0, question: ("CON LA B.") },
{ letter: "c", answer: "churumbel", status: 0, question: ("CON LA C.") },
{ letter: "d", answer: "diarrea", status: 0, question: ("CON LA D.") },
{ letter: "e", answer: "ectoplasma", status: 0, question: ("CON LA E." ) }
]
//Declaro variable que usaremos durante el juego
var i = 0;
var success = 0;
var fail = 0;
var finalResult;
goToGame.addEventListener('click', printQuestions);
//Función para mostrar las preguntas
function printQuestions() {
document.getElementById('game').style.display = 'block';
finalResult = success + fail;
if(finalResult === questions.length) {
console.log('El juego se ha terminado, has conseguido ' + success + ' aciertos')
}
if(i === questions.length) {
i = 0;
}
if (questions[i].status === 0) {
document.getElementById('pregunta').innerHTML = questions[i].question;
}
if (questions[i].status === 1) {
document.getElementById('pregunta').innerHTML = questions[i].question;
i++;
printQuestions();
}
}
//Evento para lanzar por click la función que valida
validateBtn.addEventListener('click', validateAnswer);
//Función para validar si la respuesta es correcta o incorrecta
function validateAnswer() {
var bola = 'bola' + i;
if(inputTextGame.value === questions[i].answer) {
document.getElementById(bola).classList.add('greenBall');
document.getElementById('inputTextGame').value = '';
document.getElementById('successCounter').innerHTML = i+1;
success++;
i++;
printQuestions();
} else {
document.getElementById(bola).classList.add('redBall');
document.getElementById('inputTextGame').value = '';
fail++;
i++;
printQuestions();
}
}
//Evento para lanzar por click la función que pasa la palabra
pasapalabraBtn.addEventListener('click', pasapalabra);
//Función para pasar de palabra
function pasapalabra() {
questions[i].status = 1;
var bola = 'bola' + i;
document.getElementById(bola).classList.add('orangeBall');
i++;
console.log('status pregunta' + i + ': ' + questions[i].status)
printQuestions();
}
* {
font-family: 'Titillium Web', sans-serif;
background-color: #429DDC;
padding:0;
margin:0;
}
#rosco ul li {
display: inline-block;
background-color: #fff;
color: black;
width: 50px;
height: 50px;
border-radius: 25px;
border: 1px solid #666;
line-height: 50px;
font-size: 20px;
margin-bottom: 10px;
}
button {
border-radius: 5px;
padding:3px 15px;
text-transform: uppercase;
}
input[type=text] {
background-color: #fff;
padding: 3px 5px;
}
.btnOrange {
background-color: orange;
}
#intro {
display: none;
}
#welcome {
display: none;
}
#pregunta {
background-color:#ffcc00;
}
#game {
display: none;
}
#ranking {
display: none;
}
.orangeBall {
background-color: orange !important;
color: white !important;
}
.redBall {
background-color: red !important;
color: white !important;
}
.greenBall {
background-color: green !important;
color: white !important;
}
<!DOCTYPE html>
<html>
<head>
<title>PasapalabraJS</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
</head>
<body>
<center>
<div id="wrapper">
<button id="goToGame">ENTRAR</button>
<!-- bloque pasapalabra -->
<div id="game">
<div id="aciertos">
<p>Aciertos: <span id="successCounter"></span></p>
</div>
<div id="cajaPregunta">
<p id="pregunta"></p>
</div>
<div id="rosco">
<ul>
<li id="bola0">A</li>
<li id="bola1">B</li>
<li id="bola2">C</li>
<li id="bola3">D</li>
<li id="bola4">E</li>
</ul>
</div>
<div id="controls">
<input id="inputTextGame" type="text" placeholder="TU RESPUESTA">
<button id="validateBtn">Validar</button>
<button id="pasapalabraBtn">Pasapalabra</button>
<button id="startGameBtn">Jugar</button>
</div>
<p id="textoRanking"></p>
<button id="startAgain" style="display: none">Jugar de nuevo</button>
</div>
<!-- bloque ranking + volver a jugar -->
<div id="ranking">
<table>
<tr>
<td>Ranking de jugadores</td>
</tr>
<tr>
<td>1er jugador</td>
</tr>
<tr>
<td>2do jugador</td>
</tr>
</table>
</div>
</div>
</center>
<script type="text/javascript" src="./app/app.js"></script>
</body>
</html>
There are several things to take into account. First, you must be able to distinguish between the first time you iterate the questions and the other iterations. Second, you must have a way of knowing where to start the next iteration of questions. I solved it this way: