Javascript 抽认卡学习应用程序

Question

大家好，我正在尝试创建一个简单的学习应用程序，其工作方式有点像用于学习的闪存卡。所以卡片的正面会有问题，而背面会有数字答案。我正在用 JavaScript 完成这一切，并计划将 HTML 和 CSS 用于 UI，因为这是我所知道的，我对编码非常陌生。这是我目前所拥有的

//User creates math object to study math
var mathObj = {
    "1+1": 2,
    "1+2": 3
}

//User creates Spanish object to study Spanish
var SpanishObj = {
    "Amigo": "Friend",
    "Agua": "Water"
}

//Function that is used to add key value pairs to a object
function addKeyVal(obj, key, val){
    obj[key] = val;
}

addKeyVal(mathObj,"1+3", 4);

//Function that tests the user
function testUser(obj){

objKeys = Object.keys(obj);
answer = obj[objKeys[2]];

var userResponse = prompt(objKeys[2]);

    if ( userResponse == answer) {
        alert("Correct");
    } else{
        alert("Incorrect");
    };
};

testUser(mathObj);

我的第一个问题是我是否正确地处理了这个问题？那就是我应该使用对象而不是键值对数组(刚刚发现这些)吗？为了帮助提供更清晰的答案，我想在未来添加的一个关键功能是让用户能够随机化他们收到问题的顺序。最后一个问题是如何让用户创建自己的对象/数组？

Answer 1

我会这样做，虽然 alert 作为反馈是一个糟糕的解决方案(非常烦人)，请尝试以 html 形式提供或使用 console.log() :

// default object for a flash-card library
function fc () {
  this.cards = {};
}

// clean input from tabs, spaces, upper-cases
// you can add functionality to make it better
fc.prototype.simplify = function ( val ) {
  return val.toLowerCase().trim();
}

// add to library an item
fc.prototype.add = function ( key, val ) {
  key = this.simplify( key );
  val = this.simplify( val );
  this.cards[ key ] = val;
}

// check the right value for the key
fc.prototype.check = function ( key, val ) {
  key = this.simplify( key );
  val = this.simplify( val );

  if ( this.cards.hasOwnProperty( key ) && this.cards[ key ] === val ) {
    return true;
  }
  return false;
}

// test all values in order
fc.prototype.test = function () {
  for (var key in this.cards) {
    var guess = prompt('and a Spanish word for "' + key + '"' );
    if ( this.check( key, guess ) ) {
      alert( 'right' ); // console.log( 'right' )
    } else {
      alert( 'wrong' ); // console.log( 'wrong' )
    }
  }
}



// making a spanish cards stack
var spanish = new fc();

// adding cards
spanish.add( 'Friend', 'Amigo' );
spanish.add( 'Water', 'Agua' );


// starting the test
spanish.test();