Tone Test

by wio_dude

HTML

<div>
  <select id="filter">
    <option value="t1">Tone 1</option>
    <option value="t2">Tone 2</option>
    <option value="t3">Tone 3</option>
    <option value="t4">Tone 4</option>
    <option value="all" selected>All</option>
  </select>
</div>
<div id="answer"><span id="answer1">&nbsp;</span><span id="answer2">&nbsp;</span></div>
<div id="prompt">Press [Enter] to begin</div>
<div><input type=text id="input" /></div>
<div id="result"></div>
<div id="time"></div>
<div id="score"></div>

CSS

div, input, select {
  margin: 10px auto;
  text-align: center;
  font-size: 32px;
}

JavaScript

const QUIZ_DATA = [
  [
    [1, 1], '飞机', 'fēijī', 'fieji', 'bottle'
  ],
  [
    [1, 2], '工人', 'gōngrén', 'gongren', 'worker'
  ],
  [
    [1, 3], '身体', 'shēntǐ', 'shenti', 'body'
  ],
  [
    [1, 4], '鸡蛋', 'jīdàn', 'jidan', 'chicken egg'
  ],
  [
    [1, 5], '包子', 'bāozi', 'baozi', 'steamed stuffed bun'
  ],
  [
    [2, 1], '钱包', 'qiánbāo', 'qianbao', 'purse, wallet'
  ],
  [
    [2, 2], '篮球', 'lánqiú', 'lanqiu', 'basketball'
  ],
  [
    [2, 3], '牛奶', 'niúnǎi', 'niunai', 'cow milk'
  ],
  [
    [2, 4], '图片', 'túpiàn', 'tupian', 'picture'
  ],
  [
    [2, 5], '瓶子', 'píngzi', 'pingzi', 'bottle'
  ],
  [
    [3, 1], '火车', 'huǒchē', 'huoche', 'train'
  ],
  [
    [3, 2], '嘴唇', 'zuǐchún', 'zuichun', 'lips'
  ],
  [
    [3, 3], '水果', 'shuǐguǒ', 'shuiguo', 'fruit'
  ],
  [
    [3, 4], '米饭', 'mǐfàn', 'mifan', 'rice'
  ],
  [
    [3, 5], '椅子', 'yǐzi', 'yizi', 'chair'
  ],
  [
    [4, 1], '面包', 'miànbāo', 'mianbao', 'bread'
  ],
  [
    [4, 2], '地球', 'dìqiú', 'diqiu', 'earth'
  ],
  [
    [4, 3], '课本', 'kèběn', 'keben', 'textbook'
  ],
  [
    [4, 4], '电话', 'diànhuà', 'dianhua', 'phone'
  ],
  [
    [4, 5], '筷子', 'kuàizi', 'kuaizi', 'chopsticks'
  ],
];

const FILTERS = {
  t1: (question) => question[0][0] === 1,
  t2: (question) => question[0][0] === 2,
  t3: (question) => question[0][0] === 3,
  t4: (question) => question[0][0] === 4,
  all: (question) => true,
};

const WHITE_TO_BLACK_ANIMATION = [
  [
    [{
        color: '#FFFFFF',
      },
      {
        color: '#FFFFFF',
        offset: 1 / 4,
      },
      {
        color: '#000000',
        offset: 1,
      },
    ],
    20000,
  ],
  [
    [{
        color: '#FFFFFF',
      },
      {
        color: '#FFFFFF',
        offset: 3 / 4,
      },
      {
        color: '#000000',
        offset: 1,
      },
    ],
    20000,
  ],
];



const byId = document.getElementById.bind(document);
const filter = byId('filter');
const answer1 = byId('answer1');
const answer2 = byId('answer2');
const prompt =...