Last active
July 12, 2017 11:38
-
-
Save think49/56383a8018e9717679628c55bd4ec852 to your computer and use it in GitHub Desktop.
出題フォームを生成する (URL Standard)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html id="root"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>出題フォームを生成する</title> | |
| <body> | |
| <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://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> | |
| <script src="create-qa-form.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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) + ') ' + answer + ' -> ' + correctOrIncorrect[Number(answer.toLowerCase() === qaList[i][1].toLowerCase())]; | |
| df.appendChild(p); | |
| } | |
| template.parentNode.insertBefore(df, template); | |
| } | |
| } | |
| main.call(this); | |
| }.call(this)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
作成したきっかけ
きっかけは下記質問スレッドです。
GETパラメータを利用したモダンなコードを想定し、
URLSearchParamsを採用しました。ある程度は実用性を考慮していますが、ほぼ実験目的で作ったので他にもっと良い方法があると思います。
元スレで指摘されているように、ページ遷移せずに実装するのがスマートだと思います。
参考リンク