Question

大家好我正在尝试创建一个简单的学习应用程序，有点像闪存卡用于学习。因此，卡片的正面会有问题，而背面则是数字化的答案。我在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);

我的第一个问题是我正确地解决了这个问题吗？那我应该使用对象而不是键值对数组（刚刚发现这些）？为了帮助提供更清晰的答案，我希望将来添加的关键功能是让用户能够随机化他们收到问题的顺序。最后一个问题是我如何让用户创建自己的对象/阵列？

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

Answer 2

从页面添加（以及更多）：

<!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>

Javascript Flashcard学习应用程序

2 个答案: