Javascript Flashcard Study App

안녕하세요 여러분, 저는 공부를 위해 플래시 카드와 비슷한 작업을하는 간단한 공부 앱을 만들려고합니다. 그래서 카드의 앞면에는 질문이 있고 뒤쪽에는 디지털 답이 있습니다. JavaScript에서이 모든 작업을하고 UI에 HTML과 CSS를 사용할 계획입니다. 왜냐하면 그것이 내가 아는 전부이기 때문입니다. 코딩이 새로워졌습니다. 이것은 내가 지금까지 가지고있는 것입니다.Javascript Flashcard Study App

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

제 첫 질문은 제가 올바르게하려고하는 것입니까? 열쇠 값 쌍 배열 대신 객체를 사용해야합니까 (그냥 이것들에 대해 알아 냈습니다)? 보다 명확한 대답을 제공하기 위해 앞으로 추가 할 핵심 기능은 사용자가 질문을받는 순서를 무작위로 선택할 수 있도록하는 것입니다. 최종 질문은 사용자가 자신의 Objects/Arrays를 어떻게 만들 수 있습니까? 피드백으로 alert 끔찍한 솔루션 (매우 짜증나는) 비록

출처

2014-09-07 user3308258

을 (그리고) :

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

출처

2014-09-09 01:30:03

당신의 모든 도움을 위해 대단히 감사합니다. – user3308258

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

출처

2014-09-07 05:26:31

감사합니다. 키와 값을 추가하고 솔루션을 확인하는 방법이 내 것보다 낫습니다. 지금 내 유일한 나머지 질문은 HTML을 통해 새 카드를 만들 수있는 사용자를 얻는 방법입니다. html 요소를 onclick = "fc (this)"에 매핑하면 원하는 경우 사용자가 자신의 새 객체를 만들 수 있습니다. 자신의 고유 한 대상을 연구합니다. 아래에 – user3308258

이 추가되었습니다. 당신은이 방법으로 할 수 있습니다. (fc가 아닙니다 -이게 아무것도 의미하지 않습니다.)하지만 가능한 한 많이 js와 html을 분리하는 것이 더 좋습니다 –

Javascript Flashcard Study App

답변

관련 문제