click on the correct answer
to control that they click on the correct answer it is convenient for you to pass the event in the listener function, that is to say squares[i].addEventListener('click', function(e){... this will allow you to read the target of the click with the method .target .
For example, what I did was to control that the answer was correct thanks to the class using e.target.className , you could also use e.target.id ecc ..., and here we connect to your other question
How do I make sure that this is always the correct answer?
To make sure that this happens, you have to create a new array, in the case of down here I use var answers = []" to save the answers that we will insert later in the answer boxes.
You are taking the idiom with a random number that you have in the variable randomSlang since meaning and modismos have the same indexes, for the translation of the idiom or the revez, we take advantage to get the correct answer with the same variable and we insert the value in the array that we finished creating. answers.push(meaning[randomSlang]) .
Now we know that of the 6 boxes, 1 is already occupied is to say that we have 5, at this point we cycle for to get the remaining meaning in random mode. I in this example use the following for:
for (var i = 0; i < 5; i++){
var randomindex = Math.floor(Math.random() * meaning.length);
//SI EL ELEMENTO ES IGUAL A LA RESPUESTA CORRECTA DIMINUIMOS i Y SEGUIMOS
if (meaning[randomindex] === meaning[randomSlang])
i--;
else
answers.push(meaning[randomindex]);
}
As you can see the intern has an if, this serves to not repeat the correct answer more than once. at this point so that it is not obvious that answer 1 is always correct, we add a good answers.sort() to mix the array.
Once the cycling is finished, we have the answer array completed and using the for cycle that you had initially created, modifying the paramenters: for (var i = 0; i < answers.length; i++) at this moment, we will control the content that we are putting in the page, to find our correct answer if (answers[i] === meaning[randomSlang]) if they correspond we add the one class that can be "correct" in this mode squares[i].className += " correcta";
and finally connecting to the first one, we see if the answer chosen is the correct one: if (e.target.className === "square correcta")
working example:
var modismos = [
"¿Que mas?",
"¡Listo!",
"¡Deli!",
"Rumbear",
"Inmamable",
"Guacala",
"Chevere",
"¡De una!",
"¿Quién dijo yo?",
"¡Que vaina!",
"Ni modo",
"Para nada",
"¡Ya dijo!",
"Ni loco!"
];
var meaning = [
"it's actually just a local way to say 'What's up?'",
'Ready, done, ok',
'Yummy or delicious',
'To party',
'Annoying',
'Yuck',
'Cool',
'An enthusiastic way to say “yes, let’s do it!”.',
'Anyone?',
'Too bad',
'Oh well or never mind',
'Oh well or never mind',
'Yeah right!',
'No way'
];
//UTILIZA ESTA VARIABLE PARA SACAR TAMBIEN EL MEANING CORRESPONDIENTE
var randomSlang = Math.floor(Math.random()* modismos.length);
//CREA UN NUEVO ARRAY PARA ALMACENAR LOS MEANING QUE QUIERAS INSERTAR EL LA PAGINA
var answers = [];
//INSERIS EL MEANING CORRESPONDIENTE A LA PREGUNTA
answers.push(meaning[randomSlang]);
document.getElementById("respuesta01").innerHTML = modismos[randomSlang]
//AGREGAS UN FOR PARA INSERTAR LAS RESPUESTAS QUE FALTAN, EN ESTE CASO COMO YA TENES UNA TE FALTAN 5
for (var i = 0; i < 5; i++){
var randomindex = Math.floor(Math.random() * meaning.length);
//SI EL INDEX ALEATORIO ES IGUAL AL INDEX DE LA RESPUESTA CORRECTA, DIMINUIMOS i Y SEGUIMOS
if (meaning[randomindex] === meaning[randomSlang])
i--;
else
answers.push(meaning[randomindex]);
}
//MEZCLAMOS EL ARRAY DE LAS RESPUESTAS PARA ASEGURARNOS DE QUE ESTEN SIEMPRE MEZCLADAS
answers.sort();
var squares = document.querySelectorAll(".square");
for (var i = 0; i < answers.length; i++) {
squares[i].textContent = answers[i];
if (answers[i] === meaning[randomSlang])
squares[i].className += " correcta"
//Adicionar el clicklistener a los cuadrados
squares[i].addEventListener('click', function(e){
//Comparar la definición escogida con la correcta
if (e.target.className === "square correcta"){
console.log("That's right! Well done octopus!");
document.getElementById("respuestaCorrecta").innerHTML = "That's right! Well done octopus!";
} else {
this.style.background ="#1a1a1a";
this.style.color ="#1a1a1a";
}
})};
body{
font-family: "Montserrat";
background-color: #1a1a1a;
color: #e6e6e6;
}
body > .container {margin-top:60px;}
.navbar-brand {
height: auto;
padding: 0;
}
.navbar-inverse {
top: 0;
right: 0;
left:0;
z-index: 10;
background-color: #1a1a1a;
box-shadow: 0 0 3px 3px #1a1a1a;
position: fixed;
border: none;
padding-top: 20px;
padding-bottom: 10px;
}
.navbar-inverse .navbar-nav >li>a{
color: #ffffff;
background-color: #6666ff;
width: 40px;
height: 40px;
border-radius:50%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.jumbotron{
color: #55552b;
margin-top:60px;
}
h1{
color: #ffffff;
text-align: center;
height: 80px;
line-height: 80px;
}
#container{
margin: 0 auto;
max-width: 600px;
}
.square{
width: 30%;
height: 50px;
padding-bottom: 30%;
float: left;
margin: 1.66%;
color:#293d3d;
text-align: center;
background-color: #668cff;
}
<!DOCTYPE html>
<html>
<head>
<title>Spanish Game</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="Spanish.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburguer" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="HappyChristmas.html" class="navbar-brand">The O <br> and <br> The S</a>
</div>
<ul class="nav navbar-nav">
<!-- Barra de menu de la izquierda
-->
</ul>
<div class="collapse navbar-collapse" id="hamburguer">
<ul class="nav navbar-nav navbar-right">
<!-- CABALLITO DE MAR -->
<li><a href="#">S</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h2>Let´s learn some spanish!</h2>
<p>This are some of our colombian slang. Can you guess their respect meaning?</p>
</div>
</div>
<div class="col-lg-12">
<h1>The colombian slang is: <text id="respuesta01"></text></h1>
<h3 id="respuestaCorrecta"></h3>
</div>
<div id="container">
<div class="square" id=1></div>
<div class="square" id=2></div>
<div class="square" id=3></div>
<div class="square" id=4></div>
<div class="square" id=5></div>
<div class="square" id=6></div>
</div>
</div>
</div>
<script type="text/javascript" src="Spanish.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I hope it serves you, success.