用 Json-server 作簡易的試題測驗

十二月 20, 2020

目的

最近一直在準備只剩半個月就要到的考試，實在是因為電子檔的題目和答案是放在一起所以很難知道有沒有記熟，加上題目太多要印成紙本大約會有快百頁的量，所以就想到用 json-server 來製作簡易的答題網頁。

建立

需要先準備

Json 資料庫：有考題、選項、答案
HTML 頁面

Json 資料庫

1
2
3

npm install -g json-server
# 開啟 server
json-server --watch db.json

頁面

在 HTML 要準備 2 個部分，一個要放題目的，另一個是點擊答案後提示答對或答錯

1 2	<div id="text"></div> <div id="answer"></div>

AJAX

發出 request 取得 json-server 的資料

1
2
3

var xhr = new XMLHttpRequest();
xhr.open('get', 'http://localhost:3000/math/', true);
xhr.send(null);

接收回傳

1	let callback = JSON.parse(xhr.responseText);

到這裡就可以用 console.log(callback) 看是不是有資料，若是沒有就可能是資料太多，要確保等待資料在回傳前不執行之後的網頁渲染，可以使用

1
2
3

xhr.onload = function() {
  // 當資料回傳後要執行 ...
}

這作用是在當資料還在回傳的路上時，會先等待資料取得後才開始執行之後的部分

在 Json 我是使用陣列把選項放在一起，所以看起來會是這樣

{
  "math": [
    {
      "id": 1,
      "text": "1 + 1 =",
      "select": ["2", "A", "11"],
      "answer": 0
    },
    {
      "id": 2,
      "text": "1萬 * 1萬 =",
      "select": ["1萬", "2萬", "1億"],
      "answer": 2
    }
  ]
}

完成 !

let xhr = new XMLHttpRequest(),
    _url = 'http://localhost:3000/math/';

function loadTest(test_num) {
  xhr.open('get', _url + test_num, true);
  xhr.send(null);
  xhr.onload = function(){
    let text_box = document.getElementById('text');
    document.getElementById('answer').innerHTML = '';
    let callback = JSON.parse(xhr.responseText);
    let innerHTML_str = '',
        _ans = callback.answer,
        _select = callback.select,
        _selectAry = ['A', 'B', 'C'];

    if (callback.id == test_num) {
      str = `<span>${test_num} . ${callback.text}</span>`
      for(let i in _select) {
        if ( i == _ans ) {
          str += `<button onclick="selectAns('${_select[i]}', ${test_num})">(${_selectAry[i]}) ${_select[i]}</button>`
        } else {
          str += `<button onclick="selectAns(false, ${test_num})">(${_selectAry[i]}) ${_select[i]}</button>`
        }
      }
      text_box.innerHTML = str;
    } else {
      text_box.innerHTML = `
      <span>題目結束 !</spna>
      <button onclick="loadTest(1)">回到第一題 ? </button>`
    }
  }
}

// 選出答案
function selectAns(ans, test_num) {
  let ans_box = document.getElementById('answer');
  let str = '';
  if(ans == false) {
    ans_box.innerHTML = `<p>答案錯誤 ! 請重新選擇 !</p>`;
  } else {
    ans_box.innerHTML = `<p>答案正確 !</p><button onclick="loadTest(${test_num+1})">下一題 >> ${test_num+1}</button>`;
  }
}

大約是這樣，之後如果還有想到什麼功能再補上。