ツール - Custom Written Quiz
Welcome to the custom written quiz tool! Here you will be able to setup your own custom quiz that requires input via keyboard. These quizzes are a bit more advanced and require some HTML to set things up properly. Please read over the help section for more information.
Written Quiz HTML
Use the textarea below to setup your custom written quiz.
Tip: You can remix existing exercises using snippets.
Custom Written Quiz Code (JSON)
The custom written quiz code is used to save your quiz. You can save this code to a text file for later, so you don't have to setup your quiz again. When you're ready to study once more, just load the file or drag and drop it into this textarea and click "study" to continue where you left off.
Help, Notes, and Tips
The custom written quiz tool is a bit more advanced than the others, as it requires some minimal knowledge of HTML to use properly. However, because of this, these exercises are a bit more flexible in what you can create. Please read over each section carefully.
Quick Navigation- Creating Input Zones
- Input Zones with Hints
- Input Zones with Two Answers
- Input Zones with Sub-Answers
- Input Zones with Furigana
- Input Zones with Custom Width
- Useful HTML Elements
- Snippets
Creating Input Zones
Input Zones are used for answering questions that you create. They're fairly simple and straightforward. Your standard Input Zone looks like the following.
{ANSWER}
The two curly braces {} indicate an input zone, the text between these braces is the answer to a question. If the answer is wrong it'll show the correct answer at the end of the quiz below the input zone. (see example below.)
Input Zones with Hints
If you want to provide a hint for your input zone, add a horizontal bar after the answer; the text after the horizontal bar is the hint.
{ANSWER|HINT}
The hint will be shown beneath the input zone while the quiz is in progress, once the quiz is completed the correct answer will be shown, if it was answered incorrectly.
Input Zones with Two Answers
If you want to allow an input zone to have two answers you use the syntax below.
{ANSWER1|ANSWER2|answer}
ANSWER1 and ANSWER2 will be answers to a question. The last text "answer" is a flag that tells the API that the HINT is now an ANSWER.
Input Zones with Sub-Answers
If you want to allow an answer to use more than one word or phrase use the syntax below.
{%(あの/その/この)ねこ}
%() initializes a sub-answer list within an answer, which allows a limitless amount of possible words or phrases, separated by a "/", that can be used to answer the question. Only one of these can be used per answer, which means you can use 1 in ANSWER1 and another 1 in ANSWER2. For example: {%(あの/その/この)ねこ|%(あの/その/この)いぬ|answer} has a total of 6 possible answers.
Input Zones with Furigana
If you want to show only furigana when an answer is wrong, pass "furigana" to the third parameter.
{ANSWER|FURIGANA|furigana}
ANSWER is the answer, FURIGANA is the furigana, and "furigana" is a flag that tells the API the second parameter is FURIGANA; not a hint or answer.
Input Zones with Custom Width
The width of input zones is automatically calculated based on the amount of characters in ANSWER or HINT. Sometimes the width may be inadequate when using a HINT and you'll need to set it manually using the method below.
{ANSWER|HINT|width:N}
ANSWER is the answer, HINT is the hint, and "width:N" is a flag that tells the API to set a custom width -- N being a number. Note: the width is set in pixels. (200px in the example below; ex. {ANSWER|HINT|width:200})
Useful HTML Eelements
Below is a list of useful HTML elements that you can use to format your quizzes.
<div class="problem"></div> it is recommended that you put input zones inside this element. It adds a large margin below the input zone, preventing the correct answers from overlapping other elements. You may have multiple input zones inside a div.problem block.<div class="count-problems"></div> put your problem blocks in this element to add numbers next to each problem.<div class="columns-2 clear"><div>COLUMN1</div><div>COLUMN2</div></div> put problems in COLUMN1 or COLUMN2 to display them side by side.<p class="section-desc"></p> can be used for section descriptions. It creates a bold text section, usually for giving instructions.<div class="sub-section"></div> you can use this element to add contrast between sections. It creates a block with a white background.<div class="sub-section text-passage"></div> if you're planning to write a lot of text that's going to be read, it's best that you use a div.sub-section.text-passage block, as it increases the size of the text making it more readable.<div class="sub-section text-passage vertical-text"></div> if you're creating a text-passage for vertical text, use this block instead.Snippets
Below is the source code for existing exercises that you can remix. Click "Import" or copy and paste the exercise you want to remix into the Written Quiz HTML textarea to see how it works!