Genki Study Resources

Fork Me

ツール - 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 copy this code and save it 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 paste the code 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 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.)

QUIZ IN PROGRESS
QUIZ COMPLETE
Correct
Wrong
ANSWER

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.

QUIZ IN PROGRESS
HINT
QUIZ COMPLETE
Correct
HINT
Wrong
HINTANSWER

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.

QUIZ IN PROGRESS
QUIZ COMPLETE
Correct
Wrong
ANSWER1ANSWER2

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, seprated 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.

QUIZ IN PROGRESS
QUIZ COMPLETE
Correct
Wrong
(あの/その/この)ねこ

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.

QUIZ IN PROGRESS
QUIZ COMPLETE
Correct
Wrong
ANSWERFURIGANA

Input Zones with Custom Width

The width of input zones is automatically calcuated 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})

QUIZ IN PROGRESS
HINT
QUIZ COMPLETE
Correct
HINT
Wrong
HINTANSWER

Useful HTML Eelements

Below is a list of useful HTML elements that you can use to format your quizzes.

PROBLEMS

<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.
TEXT PASSAGES

<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!

Workbook: Volitional Form Conjugation Practice - Lesson 15
Workbook: ~てください - Lesson 6
Workbook: Fill in the Blanks - Lesson 13
Reading Practice: スーさんの日記 - Lesson 9
Kanji Practice: Write the Readings - Lesson 15