Problem with conditional

Question

Problem with conditional

Navigation

#1 by (1 votes)

2

I have a problem with this code. It is a game of pasapalabra. It consists in guessing the words. I have two buttons, one to validate (valid if the answer is correct or not) and another that passes the turn. At the end, when he asks again the unanswered questions (clicked with the paspalabra button) he only shows me again the questions that have been wrong / correct and he would have to show me the ones that have been passed. Something is slipping away from 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>

javascript

asked by jaumeserr 09.06.2018 в 00:10

source

1 answer

laravel 5.6 related models to related models Change the expandable list view android icon

score 1 · Accepted Answer

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 the questions. I solved it this way:

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 j = 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) {
           var counter = 0;
            questions.some(function(question) {
              if (question.status === 1) {
                i = counter;
              }
              counter++;
              return question.status === 1
            });
            if(i === questions.length) {
              i = 0;
            }
        }
    
        if (j < 5 && questions[i].status === 0) {
            document.getElementById('pregunta').innerHTML = questions[i].question;
        }
    
        if (questions[i].status === 1) {
            document.getElementById('pregunta').innerHTML = questions[i].question;
            i++;
            j++;
            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++;
            j++;
            printQuestions();
        } else {
            document.getElementById(bola).classList.add('redBall');
            document.getElementById('inputTextGame').value = '';
            fail++;
            i++;
            j++;
            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');
        console.log('status pregunta' + i + ': ' + questions[i].status)
        i++;
        j++;
        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>