JS Multiple Choice Game не может найти правильный ответ

Question

JS Multiple Choice Game не может найти правильный ответ

1

Я создаю эту игру с множественным выбором в JavaScript. Правила довольно просты; пользователь спрашивает, что число1 + число2 равно, и есть 4 разных ответа на выбор (один правильный).

Однако по какой-то причине в моем коде, независимо от того, какой ответ я выбираю (даже если это неправильно), игра всегда говорит мне, что я выбрал правильный.

Вот мой код:

var num1 = Math.floor((Math.random() * 30) + 10);
var num2 = Math.floor((Math.random() * 30) + 10);
var result = num1 + num2;

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById('field1').innerHTML = num1;
    document.getElementById('field2').innerHTML = num2;
    var opts = [];
    for(var i=0;i<3;i++){
      opts.push(findRandom(result,opts));
    }  
    opts.push(result);
    opts.sort();  
    for(var i=1;i<5;i++){ 
     document.getElementById('option'+i).innerHTML = opts[i-1];
    }  
  console.log(opts);
});

function findRandom(n,opts){
  var result = 0;
  while(result !=n && result == 0){
    result = Math.floor(Math.random() * (n + 1)); 
    if(opts.indexOf(result) >0){
      result = 0;
    }
  }
  return result;
}

var choices = document.querySelectorAll('.field-block');
[].slice.call(choices).forEach(function(choice){
   choice.addEventListener('click', function(){
      getChoice(choice);
   });
});

function getChoice(){
  if(choices.innerHTML = result){
    after.classList.remove('hide');
    after.classList.add('correct');
    after.innerHTML = 'Good job :) !';
  } else{
    after.classList.remove('hide');
    after.classList.add('wrong');
    after.innerHTML = "Wrong answer :( Try again !";
  }
}

Вот мой код: https://codepen.io/teenicarus/pen/Oxaaoe

Попробуйте сами, вы сразу увидите проблему.

Как это исправить?

Я ценю все ответы

Thierry Diallo 19 окт. 2017, в 12:51

Источник

Теги:

javascript

3 ответа

0

У вас есть две ошибки. Во-первых: вы вызываете getChoice() в обработчике событий с параметром, но ваша функция не принимает никаких параметров. Во-вторых: в вашем getChoice вы не сравниваете, вы назначаете (= is not ==).

Я исправил код: https://codepen.io/anon/pen/mBvpvb

Simon Kraus 19 окт. 2017, в 08:33

0

Я не полностью прошел этот пример, но, вероятно, это:

if(choices.innerHTML = result){

Вы назначаете результат, а не проверяете его, поэтому результат всегда прав.

Также вы не проходите выборов:

function getChoice(){

Пытаться

function getChoice(choices){

delinear 19 окт. 2017, в 07:27

Ещё вопросы

Rory McCrossan · Accepted Answer · 2017-10-19T07-58-00.000Z

Там пара проблем. Во-первых, вам нужно использовать аргумент, переданный функции getChoice() поскольку он содержит выбранный choice. choices - это массив доступных опций.

Во-вторых, = для присвоения значений. Вот почему у вас всегда был успешный результат. Вы должны использовать == или === при сравнении значений. Попробуй это:

var num1 = Math.floor((Math.random() * 30) + 10);
var num2 = Math.floor((Math.random() * 30) + 10);
var result = num1 + num2;

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById('field1').innerHTML = num1;
  document.getElementById('field2').innerHTML = num2;
  var opts = [];
  for (var i = 0; i < 3; i++) {
    opts.push(findRandom(result, opts));
  }
  opts.push(result);
  opts.sort();
  for (var i = 1; i < 5; i++) {
    document.getElementById('option' + i).innerHTML = opts[i - 1];
  }
});

function findRandom(n, opts) {
  var result = 0;
  while (result != n && result == 0) {
    result = Math.floor(Math.random() * (n + 1));
    if (opts.indexOf(result) > 0) {
      result = 0;
    }
  }
  return result;
}

var choices = document.querySelectorAll('.field-block');
[].slice.call(choices).forEach(function(choice) {
  choice.addEventListener('click', function() {
    getChoice(choice);
  });
});

function getChoice(choice) {
  if (choice.innerHTML == result) {
    after.classList.remove('hide');
    after.classList.add('correct');
    after.innerHTML = 'Good job :) !';
  } else {
    after.classList.remove('hide');
    after.classList.add('wrong');
    after.innerHTML = "Wrong answer :( Try again !";
  }
}

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 60px;
}

.App-header {
  background-color: #222;
  height: 180px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.text-info {
  color: #fff;
  font-weight: bold;
  font-size: 2.1rem;
}

.question {
  font-size: 2rem;
}

.options {
  margin: 5%;
  display: flex;
  margin-right: -12px;
  margin-left: -12px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  flex: 1 0 auto;
}

.fields {
  display: flex;
  padding: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex: 1;
}

.field-block {
  display: flex;
  min-height: 160px;
  padding: 10%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*flex: 1 0 auto;*/
  border-radius: 4px;
  background-color: #f9bad0;
  font-size: 6rem;
  color: #fff;
  cursor: pointer;
}

.quiz {
  color: #ddd;
  margin: 2%;
  background-color: #ec1561;
  padding: 2%;
  width: 90%;
  position: relative;
}

.button {
  display: flex;
  height: 48px;
  padding-right: 16px;
  padding-left: 16px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  border-radius: 4px;
  background-color: #2fcaaa;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), 0 2px 12px 0 rgba(0, 0, 0, .1);
  transition: box-shadow 200ms ease-out;
  color: #fff;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.quiz .after {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 80%;
  /*display: none;*/
  color: #FFF;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  opacity: 0.8;
  font-size: 3rem;
}

.correct {
  background-color: green;
}

.wrong {
  background-color: #D91E18;
}

.hide {
  display: none !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<a href="https://happy-learning.herokuapp.com/ " target="_blank"><img alt="Join Slack" height="40" width="139" src="http://i.imgur.com/0Lne5Vr.png" /></a>
<div>
  <h1>Adding Game</h1>
  <p id="demo">In this lecture, we will cover the game to add 2 numbers.</p>
</div>
<hr>

<div class="quiz">
  <div class="quiz-content">
    <div class="question">
      What is the sum of <span class="text-info" id="field1">5</span> and <span class="text-info" id="field2">5</span>?
    </div>
    <div class="options">
      <div class="fields animated zoomIn">
        <div class="field-block" id='option1'>
          <li>10</li>
        </div>
      </div>
      <div class="fields animated zoomIn">
        <div class="field-block" id="option2">
          <li>10</li>
        </div>
      </div>
      <div class="fields animated zoomIn">
        <div class="field-block" id="option3">
          <li>10</li>
        </div>
      </div>
      <div class="fields animated zoomIn">
        <div class="field-block" id="option4">
          <li>10</li>
        </div>
      </div>
    </div>
    <div class="after hide" id="after">

    </div>
    <div class="play-again">
      <a class="button" onClick="window.location.href=window.location.href">Play Again</a>
    </div>
  </div>
</div>