Javascript抽认卡学习应用程序

大家好，我正在尝试创建一个简单的学习应用程序，它有点像学习用的闪存卡。所以卡的正面会有问题，背面会有答案，但都是数字的。我用JavaScript做这些，并计划在UI中使用HTML和CSS，因为这是我所知道的，我对编码非常陌生。这就是我目前所拥有的

//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);

---

我的第一个问题是，我这样做对吗？也就是说，我应该使用对象而不是键值对数组（刚刚了解到这些）？为了帮助提供更清晰的答案，我想在将来添加的一个关键功能是让用户能够随机化他们接收问题的顺序。最后一个问题是，我如何让用户创建他们自己的对象/数组？

我会这样做，尽管

警报

作为反馈是一个糟糕的解决方案（非常烦人），请尝试使用html或使用

console.log（）

：

通过从页面添加（以及更多内容）：

添加测试
保存测试
清仓
（功能（文档、窗口）{
var result=document.getElementById（'div-result'）
，total=document.getElementById（'div-total'）；
//闪存卡库的默认对象
函数fc（）{
this.cards={}；
}
//清除制表符、空格和大写字母的输入
fc.prototype.simplify=函数（val）{
如果（val！==null）{
返回值toLowerCase（）.trim（）；
}
返回null；
}
//将项目添加到库中
fc.prototype.add=功能（键，val）{
key=this.simplify（key）；
val=这个。简化（val）；
if（key！==null&&val！==null）{
此.cards[key]=val；
}
}
//检查键的正确值
fc.prototype.check=功能（键，val）{
key=this.simplify（key）；
val=这个。简化（val）；
if（this.cards.hasOwnProperty（key）&&this.cards[key]==val）{
返回true；
}
返回false；
}
//按顺序测试所有值
fc.prototype.start=函数（）{
var权限=0
，错误=0；
result.innerHTML=''；
total.innerHTML=''；
for（此.cards中的var i）{
var guess=prompt（'和一个西班牙语单词表示“'+i+'”）；
如果（这个。检查（我猜））{
result.innerHTML+='Right:'+i+'&rarr；'+this.cards[i]；
权利++；
}否则{
result.innerHTML+='错误：'+guess+'，'+i+'&rarr；'+this.cards[i]；
错误++；
}
result.innerHTML+='
'；
}
total.innerHTML='正确答案：'+rights+'
错误答案：'+rights；
}
var app=（函数（文档、窗口）{
//声明一些引用、变量
变量测试={}
，el=document.getElementById（'tests'）；
函数addTest（）{
var name=prompt（'testname？'）；
如果（名称！==null）{
测试[名称]=新fc（）；
render（）；
}
}
//登记一些事件
函数注册表事件（）{
document.getElementById（'btn-add'）.addEventListener（'click'，addTest，false）；
document.getElementById（'btn-save'）。addEventListener（'click'，save，false）；
//document.getElementById（'btn-load'）。addEventListener（'click'，load，false）；
document.getElementById（'btn-clear'）。addEventListener（'click'，clear，false）；
}
//渲染功能
函数渲染（）{
var li=未定义
，linkAdd=未定义
，linkStart=未定义
，docFrag=document.createDocumentFragment（）；
//清除dom
而（第一个孩子）{
el.removeChild（el.firstChild）；
};
el.innerHTML=''；
用于（测试中的var i）{
li=document.createElement（'li'）；
li.innerHTML=i；//测试名称
li.appendChild（document.createTextNode（'->'）；
//btn启动测试
btnStart=document.createElement（'button'）；
btnStart.setAttribute（'data'，i）；
btnStart.addEventListener（'click'，函数（e）{
var my=this.getAttribute（'data'）；
测试[my].start（）；
}，假）；
btnStart.textContent='开始测试'；
李.儿童（btnStart）；
//btn将项目添加到测试中
btnAdd=document.createElement（'button'）；
btnAdd.setAttribute（'data'，i）；
btnAdd.addEventListener（'click'，函数（e）{
var my=this.getAttribute（'data'）；
测试[my]。添加（提示（'key'）、提示（'value'））；
}，假）；
btnAdd.textContent='additem'；
li.儿童（btnAdd）；
//删除测试
btnRemove=document.createElement（'button'）；
btnRemove.setAttribute（'data'，i）；
btnRemove.addEventListener（'click'，函数（e）{
var my=this.getAttribute（'data'）；
删除测试[我的]；
render（）；
}，假）；
btnRemove.textContent='删除测试'；
li.追加子女（btnRemove）；
文件附件（李）；
};
el.appendChild（docFrag）；
}
//将测试保存到本地存储
函数保存（）{
var data=JSON.stringify（测试）；
控制台日志（数据）；
setItem（'tests'，data）；
}
//负载测试形成本地存储
功能负载（）{
var saved=localStorage['tests']| | false；
如果（已保存）{
var数据=未定义；
data=JSON.parse（localStorage.getItem（'tests'））；
控制台日志（数据）；
//使用加载的数据初始化测试对象
用于（数据中的var i）{
测试[i]=新fc（）；
对于（数据[i]中的var j）{
测试[i][j]=数据[i][j]；
}
}
render（）；
} 
}
函数清除（）{
localStorage.clear（）；
测试=[]；
render（）；
}
//初始化部分
registerEvents（）；
加载（）；
}）（文件，窗口）；
}）（文件，窗口）；

// 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();

<!DOCTYPE html>
<html lang="en">
<body>


  <ul id="tests"></ul>

  <button id="btn-add">Add test</button>
  <button id="btn-save">Save tests</button>
  <!-- <button id="btn-load">Load tests</button> -->
  <button id="btn-clear">Clear storage</button>

  <div id="div-result"></div>
  <div id="div-total"></div>

  <script type="text/javascript">

(function ( document, window ) {

  var result = document.getElementById('div-result')
    , total = document.getElementById('div-total');

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

  // clean input from tabs, spaces, uppercases
  fc.prototype.simplify = function ( val ) {
    if ( val !== null ) {
      return val.toLowerCase().trim();
    }
    return null;
  }

  // add to library an item
  fc.prototype.add = function ( key, val) {
    key = this.simplify( key );
    val = this.simplify( val );
    if ( key !== null && val !== null ) {
      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.start = function () {
    var rights = 0
      , wrongs = 0;

    result.innerHTML = '';
    total.innerHTML = '';

    for (var i in this.cards) {
      var guess = prompt('and a Spanish word for "' + i + '"' );
      if ( this.check( i, guess ) ) {
        result.innerHTML += 'Right: ' + i + ' &rarr; ' + this.cards[ i ];
        rights++;
      } else {
        result.innerHTML += 'Wrong: ' + guess + ', ' + i + ' &rarr; ' + this.cards[ i ];
        wrongs++;
      }
      result.innerHTML += '<br>';
    }
    total.innerHTML = 'Right answers: ' + rights + '<br>Wrong answers: ' +  wrongs ;
  }









  var app = ( function ( document, window ) {
    // declare some references, variables    
    var tests =  {}
      , el = document.getElementById('tests');

     function addTest () {
      var name = prompt('test name?');
      if ( name !== null ) {
        tests[ name ] = new fc();
        render();
      }
    }

    // register some events
    function registerEvents () {
      document.getElementById('btn-add').addEventListener( 'click', addTest, false );
      document.getElementById('btn-save').addEventListener( 'click', save, false );
      // document.getElementById('btn-load').addEventListener( 'click', load, false );
      document.getElementById('btn-clear').addEventListener( 'click', clear, false );
    }

    // render function
    function render () {
      var li = undefined
        , linkAdd = undefined
        , linkStart = undefined
        , docFrag = document.createDocumentFragment();

      // clear the dom
      while (el.firstChild) {
          el.removeChild( el.firstChild );
      };
      el.innerHTML = '';

      for ( var i in tests) {
        li = document.createElement( 'li' );
        li.innerHTML = i; // test name

        li.appendChild( document.createTextNode(' -> ') );

        // btn start test
        btnStart = document.createElement( 'button' );
        btnStart.setAttribute('data', i );

        btnStart.addEventListener( 'click', function( e ){
          var my = this.getAttribute( 'data');
          tests[ my ].start();
        }, false );

        btnStart.textContent = 'Start test';
        li.appendChild( btnStart );

        // btn add item to the test
        btnAdd = document.createElement( 'button' );
        btnAdd.setAttribute('data', i );

        btnAdd.addEventListener( 'click', function( e ){
          var my = this.getAttribute( 'data');
          tests[ my ].add( prompt( 'key' ), prompt( 'value' ));
        }, false );

        btnAdd.textContent = 'Add item';
        li.appendChild( btnAdd );

        // btn remove test
        btnRemove = document.createElement( 'button' );
        btnRemove.setAttribute('data', i );

        btnRemove.addEventListener( 'click', function( e ){
          var my = this.getAttribute( 'data');
          delete tests[ my ];
          render();
        }, false );

        btnRemove.textContent = 'Remove test';
        li.appendChild( btnRemove );

        docFrag.appendChild( li );
      };

      el.appendChild( docFrag );
    }

    // save tests to localstorage
    function save () {
      var data = JSON.stringify( tests );
      console.log( data );
      localStorage.setItem( 'tests', data );
    }

    // load tests form localstorage
    function load () {
      var saved = localStorage[ 'tests' ] || false;
      if ( saved ) {
        var data = undefined;
        data = JSON.parse( localStorage.getItem( 'tests' ) );
        console.log( data );

        // initialize test objects with loaded data
        for( var i in data ) {
          tests[ i ] = new fc();
          for ( var j in data[ i ] ) {
            tests[ i ][ j ] = data[ i ][ j ];
          }
        }
        render();
      } 
    }

    function clear () {
      localStorage.clear();
      tests = [];
      render();
    }

    // initialisation part
    registerEvents();
    load();

  } ) ( document, window );
} ) ( document, window );
  </script>
</html>