Question

我正在使用预先编写的测验琐事游戏代码，我必须将游戏问题选择从数字值更新为字符串。但我并不完全知道代码中要更改的内容，以便将用户选择与正确答案进行比较。目前，对于数字答案，代码会将choices数组中正确选择的数组位置与correctAnswer变量进行比较。我最好的猜测是，必须在底部显示的displayScore函数中进行更改。

当前的问题对象：

        {
            question: "What is 2*5?",
            choices: [2, 5, 10, 15, 20],
            correctAnswer: 2
        }

更新的问题对象将是：

        {
             question: "Which list contains words that are NOT names of shoe types:"
             choices:[   "A. Oxford, jelly, boat, clogs, stiletto, mary jane",
                         "B. Loafer, gladiator, wedge, mule, platform",
                         "C. Pump, moccasin, wingtip, sneaker, derby, monk",
                         "D. Chalupa, dogler, hamster, croonley, frankfurt"],
             correctAnswer : "D. Chalupa, dogler, hamster, croonley, frankfurt"
        }

目前，用于计算正确答案的代码部分是：

//Array containing user choices
var selections = []; 

// Reads the user selection and pushes the value to an array
  function choose() {
    selections[questionCounter] = +$('input[name="answer"]:checked').val();
  }

// Computes score and returns a paragraph element to be displayed
  function displayScore() {
    var score = $('<p>',{id: 'question'});

    var numCorrect = 0;
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }
  }

Answer 1

现金：

正如评论中Jonas w所述，问题是+之前的$().val()。因为它没有得到任何赞成或解释，我想我会详细说明：

bug

从输入中检索值时，该值始终为string。您的初始示例中的正确答案是number。由于您使用===进行比较，因此两者不相等：2 === "2"返回false。

添加+运算符是将值“转换”为数字的简短方法。（意见:)许多人不喜欢它，因为它很容易被错过，很难为初学者解释。可能更清楚的方法是撰写Number(x)或使用parseInt或parseFloat。

问题是，一旦您的所需值为string，+运算符将尝试使用非数字类型的字符串生成数字。结果将很好地命名为NaN，代表非数字并且可以使用isNaN

进行检查

<强>即：工作原理：

const required = 2;
const input = "2";
required === +input; // 2 === 2 -> true

符：

const required = "Hello world";
const input = "Hello world";
required === +input; // "Hello world" === NaN -> false

如何解决

总结：删除+将修复基于字符串的答案，但打破基于数字的答案。

我的建议是删除 +，但请确保您的答案数组包含字符串。（例如，使用[2, 3, 4].map(String)或toString）

进行映射

其他可能的修复包括：

使用==内的displayScore运算符将用户输入与所需值进行比较（不推荐）
为数组值的类型添加switch语句，为number，string以及其他值选择自定义比较方法。
使用数组中的index代替值，如用户Bergi所建议的那样（尽管可能会让question对象更难阅读）

实施例

一些可以帮助您了解值之间差异的示例：

var val = $("input").val();

console.log("typeof val ->", typeof val);
console.log("typeof 2 ->", typeof 2);
console.log("val == 2 ->", val == 2);
console.log("val === 2 ->", val === 2);
console.log("+val === 2 ->", +val === 2);
console.log("Number('2') === 2 ->", Number(val) === 2);

var nonNumericString = "Hello world";
console.log("+'Hello world' ->", +nonNumericString);

var answers = [2, 3, 4];
console.log("'2' in [2, 3, 4] ->", answers.includes(val));
console.log("'2' in [2, 3, 4].map(String) ->", answers.map(String).includes(val));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input value="2">

更新字符串

1 个答案:

现金：

bug

如何解决

实施例