Tengo un problema con este código. Es un juego de pasapalabra. Consiste en adivinar las palabras. Tengo dos botones, uno de validar (valida si la respuesta es correcta o no) y otro que pasa el turno. Al final, cuando vuelve a preguntar las preguntas no contestadas (clicadas con el botón pasapalabra) solo me muestra de nuevo las preguntas que han sido erroneas/acertadas y tendría que mostrarme las que se han pasado palabra. Algo se me está escapando.
esto es mi código:
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>