出題フォームを生成する (URL Standard)

HTML

<h1>出題フォームを生成する</h1>

<h2>実装</h2>

<p><code>location.search</code>に存在するGETパラメータを <code>URLSearchParams</code> でパースする。</p>

<h2>サンプル</h2>

<template id="qa-template">
<form id="qa">
  <input type="hidden" name="answer-list" />
  <p class="current-question">問題</p>
  <p><input name="current-answer" type="text" /></p>
  <p><input type="submit" value="submit" /></p>
</form>
</template>

<h2>参考リンク</h2>

<ul>
  <li><a href="https://gist.github.com/think49/56383a8018e9717679628c55bd4ec852">出題フォームを生成する (URL Standard) - GitHub</a></li>
<li><a href="https://triple-underscore.github.io/URL-ja.html#interface-urlsearchparams">6.2. URLSearchParams class - URL Standard （日本語訳）</a></li>
  <li><a href="https://url.spec.whatwg.org/#interface-urlsearchparams">6.2. URLSearchParams class - URL Standard</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams">URLSearchParams - Web APIs | MDN</a></li>
</ul>

JavaScript

/**
 * create-qa-form.js
 *
 * @version 1.0.0
 * @author think49
 * @url https://gist.github.com/think49/56383a8018e9717679628c55bd4ec852
 * @license http://www.opensource.org/licenses/mit-license.php (The MIT License)
 */
(function () {
  'use strict';
  function createQAForm (form, qaList, answerList) {
    var elements = form.elements;

    if (answerList && Array.isArray(answerList)) {
      var aLen = answerList.length;

      if (qaList.length <= aLen) {
        return null;
      }

      elements['answer-list'].value = JSON.stringify(answerList);
      form.querySelector('.current-question').firstChild.data = '(問題' + (aLen + 1) + ') ' + qaList[aLen][0];
    } else {
      // elements['answer-list'].value = JSON.stringify([elements['current-answer'].value]);
      form.querySelector('.current-question').firstChild.data = qaList[0][0];
    }

    return form;
  }

  function main () {
    var qaList = [['Javaと名前が似ているクライアントサイドスクリプト言語の名前は？', 'JavaScript'], ['ブラウザからHTML/XML文書にアクセスする為のAPIの名称は？', 'DOM'], ['JavaScriptで文/演算子等の基本的な文法/ビルトインオブジェクトをまとめた仕様の名称は？', 'ECMAScript']],
        searchParams = new URLSearchParams(location.search),
        answerList = searchParams.get('answer-list'),
        currentAnswer = searchParams.get('current-answer'),
        doc = this.document,
        template = doc.getElementById('qa-template'),
        form;

    answerList = answerList ? JSON.parse(answerList) : [];

    if (currentAnswer) {
      answerList.push(currentAnswer);
    }

    form = createQAForm(doc.importNode(template.content, true).firstElementChild, qaList, answerList);

    if (form) {
      template.parentNode.insertBefore(form, template);
    } else {
      var df = doc.createDocumentFragment(),
          p = doc.createElement('p'),
          correctOrIncorrect = ['不正解', '正解'];

      for (var i = 0, len = answerList.length, answer; i < len; ++i) {
        answer = answerList[i];
        p = p.cloneNode(false);

        p.textContent = '(回答' + (i + 1) + ') ' +...