hello-world/flashcards.js at master · SheepTester/hello-world · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
function flashCards(json, flipCards) {
  var wordelem = document.getElementById('word'),
  defelem = document.getElementById('def'),
  status = document.getElementById('status'),
  cardnum = -1,
  randomised = [],
  wrongs = [],
  flipside = 0;
  function flipObject(obj) {
    let temp = {};
    Object.keys(obj).forEach(k => temp[obj[k]] = k);
    return temp;
  }
  if (typeof flipCards === "boolean" ? flipCards : window.location.search === "?flip") json = flipObject(json);
  function shuffle(array) {
    // https://bost.ocks.org/mike/shuffle/
    var m = array.length, t, i;
    while (m)
      i = Math.floor(Math.random() * m--),
      t = array[m],
      array[m] = array[i],
      array[i] = t;
    return array;
  }
  console.log(json);
  randomised = shuffle(Object.keys(json));
  function cont(iswrong) {
    if (iswrong && randomised[cardnum]) wrongs.push(randomised[cardnum]);
    function doThings() {
      cardnum++, flipside = 0;
      wordelem.classList.add(iswrong? 'swapout' : 'fadeout');
      setTimeout(() => {
        wordelem.classList.remove('swapout');
        wordelem.classList.remove('fadeout');
        if (cardnum >= randomised.length && wrongs.length) randomised = shuffle(wrongs), wrongs = [], cardnum = 0;
        if (cardnum < randomised.length) {
          wordelem.style.opacity = 1;
          wordelem.classList.remove('hidefirst');
          wordelem.classList.add('swapin');
          wordelem.innerHTML = `<span>${randomised[cardnum]}</span>`;
          defelem.innerHTML = `<span>${json[randomised[cardnum]]}</span>`;
          setTimeout(() => {
            wordelem.classList.remove('swapin');
          },200);
          if (status) status.textContent = `${cardnum + 1}/${randomised.length}` + (wrongs.length ? ` (${wrongs.length} marked wrong)` : '');
        } else {
          wordelem.style.opacity = 0;
          defelem.style.opacity = 0;
          wordelem.classList.add('hidefirst');
          if (status) status.textContent = 'Done';
        }
      }, 200);
    }
    if (flipside === 1) {
      defelem.classList.remove('flipin');
      defelem.classList.add('flipout');
      wordelem.classList.remove('flipout');
      wordelem.classList.add('flipin');
      setTimeout(() => {
        doThings();
        defelem.classList.remove('flipout');
        wordelem.classList.remove('flipin');
      }, 500);
    } else {
      defelem.classList.remove('flipout');
      wordelem.classList.remove('flipin');
      doThings();
    }
  }
  function flip() {
    if (flipside === 0) {
      wordelem.classList.remove('flipin');
      wordelem.classList.add('flipout');
      defelem.classList.remove('flipout');
      defelem.classList.add('flipin');
    } else {
      defelem.classList.remove('flipin');
      defelem.classList.add('flipout');
      wordelem.classList.remove('flipout');
      wordelem.classList.add('flipin');
    }
    flipside = (flipside + 1) % 2;
  }
  wordelem.classList.add('hidefirst');
  cont(false);
  document.onkeydown = e => {
    if (e.keyCode === 37) cont(true);
    else if (e.keyCode === 39) cont(false);
    else if (e.keyCode === 32) flip();
  };
}