###  News and Info

## ツール - 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.

- Save
- Prettify
- Do not warn me

### 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.)

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
HINT ANSWER

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

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 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}`)

QUIZ IN PROGRESS
HINT
QUIZ COMPLETE
Correct
HINT
Wrong
HINT ANSWER

#### 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 <table class="table large-width center"> <tr> <td>dictionary form</td> <td>potential form</td> <td>volitional form</td> </tr> <tr> <td>まつ</td> <td>{まてる}</td> <td>{まとう}</td> </tr> <tr> <td>およぐ</td> <td>{およげる}</td> <td>{およごう}</td> </tr> <tr> <td>よむ</td> <td>{よめる}</td> <td>{よもう}</td> </tr> <tr> <td>やめる</td> <td>{やめられる}</td> <td>{やめよう}</td> </tr> <tr> <td>みがく</td> <td>{みがける}</td> <td>{みがこう}</td> </tr> <tr> <td>うる</td> <td>{うれる}</td> <td>{うろう}</td> </tr> <tr> <td>すてる</td> <td>{すてられる}</td> <td>{すてよう}</td> </tr> <tr> <td>くる</td> <td>{こられる}</td> <td>{こよう}</td> </tr> <tr> <td>つきあう</td> <td>{つきあえる}</td> <td>{つきあおう}</td> </tr> <tr> <td>そつぎょうする</td> <td>{そつぎょうできる}</td> <td>{そつぎょうしよう}</td> </tr> </table>
Workbook: ～てください - Lesson 6 <div class="count-problems"> <div class="problem"> Please take a picture.<br> {写真を撮ってください|しゃしんをとってください|answer}。 </div> <div class="problem"> Please teach this kanji.<br> {この漢字を教えてください|このかんじをおしえてください|answer}。 </div> <div class="problem"> Please carry this bag.<br> {このかばんを持ってください|このかばんをもってください|answer}。 </div> <div class="problem"> Please use this towel. (タオル)<br> {このタオルを使ってください|このタオルをつかってください|answer}。 </div> <div class="problem"> Please sit down.<br> {座ってください|すわってください|answer}。 </div> <div class="problem"> Please bring a book.<br> {本を持ってきてください|ほんをもってきてください|answer}。 </div> <div class="problem"> Please help with homework.<br> {宿題を手伝ってください|しゅくだいをてつだってください|answer}。 </div> <div class="problem"> Please return the book.<br> {本を返してください|ほんをかえしてください|answer}。 </div> <div class="problem"> Please drink the coffee.<br> {コーヒーを飲んでください|コーヒーをのんでください|answer}。 </div> </div>
Workbook: Fill in the Blanks - Lesson 13 <div class="count-problems"> <div class="problem">私の{くに|国|width:42}で、日本の{食べ物|たべもの}と{飲み物|のみもの}は高いです。</div> <div class="problem">私は{特に|とくに}{鳥|とり}の{肉|にく}が好きです。</div> <div class="problem">{昼|ひる}に{空港|くうこう}に{着きました|つきました}。</div> <div class="problem">{朝ご飯|あさごはん}は{まいにち|毎日|width:70}、{同じ|おなじ}{物|もの}を食べています。</div> <div class="problem">{こうこうせい|高校生|width:98}の{とき|時|width:42}、よく{海|うみ}に行きました。</div> <div class="problem">{ときどき|時々|width:70}{きぶん|気分|width:56}が{悪く|わるく}なりました。</div> <div class="problem">お母さんは、{ご飯|ごはん}は{安くて|やすくて}、{体|からだ}にいいと言います。</div> <div class="problem">{いっしょう|一年|width:84}に{いちど|一度|width:56}の経験でした。</div> <div class="problem">{買い物|かいもの}の後、{料理|りょうり}をして、{昼ご飯|ひるごはん}を食べました。</div> <div class="problem">この部屋は{空気|くうき}が{悪い|わるい}ので、窓を開けましょう。</div> <div class="problem">日本で{着物|きもの}を{着て|きて}みたいです。</div> </div>
Reading Practice: スーさんの日記 - Lesson 9 <p class="section-desc">スーさんは日記を書きました。</p> <div class="sub-section text-passage"> <p> 十一月二十五日（土）　雨<br> 今日は朝からあめがふっていた。午前中は友だちにメールを書いて、一時間ぐらい音楽を聞いた。昼ごろメアリーの家へ行った。白くて、大きい家だった。メアリーのホストファミリーの山本さんに会った。お父さんは背が高くて、やせている人だった。家で晩ご飯を食べた。お母さんは「何もありませんが」と言っていたが、たくさんごちそうがあった。晩ご飯はとてもおいしかった。お母さんは料理がすごく上手だと思う。晩ご飯の後、いろいろな話をした。そして、きれいな着物をもらった。お母さんは少し古いと言っていたが、すごくきれいだ。メアリーのホストファミリーはとてもしんせつで楽しかった。 </p> </div> <div class="vocab-key columns-2 clear"> <div> 日記（にっき）　diary<br> 午前中（ごぜんちゅう）　in the morning<br> 昼（ひる）　noon<br> ホストファミリー host family<br> ごちそう　excellent food </div> <div> いろいろ（な）　various<br> 話をする　to have a talk<br> そして　and then<br> 着物（きもの）　kimono; Japanese traditional dress </div> </div> <div class="count-problems small-margin"> <p class="section-desc">Put the following activities in the right order according to Sue's diary.</p> <div class="problem">({B}) <i class="fa"></i> ({E}) <i class="fa"></i> ({C}) <i class="fa"></i> ({D}) <i class="fa"></i> ({A})</div> <div class="sub-section"> (A) Got a kimono from Mary's mother.<br> (B) Wrote an email to a friend.<br> (C) Ate dinner at Mary's house.<br> (D) Talked with Mary's host family.<br> (E) Listened to music. </div><br> <p class="section-desc">Mark O if the following statements are true. Mark X if not true.</p> <div class="problem">({O})　スーさんは古い着物をもらった。</div> <div class="problem">({X})　お父さんは背がひくくて、やせている。</div> <div class="problem">({X})　晩ご飯は何もなかった。</div> <div class="problem">({O})　スーさんはお母さんの料理が好きだ。</div> <div class="problem">({O})　天気はよくなかった。</div> <div class="problem">({X})　メアリーさんのホストファミリーの名前は山田だ。</div> </div><br> <p class="section-desc"> BONUS: Practice your Japanese reading skills by reading the passage below. (optional)<br> スーさんはメアリーさんのホストファミリーにメールを書きました。 </p> <div class="sub-section text-passage"> <p> 山本さま<br><br> きのうはどうもありがとうございました。<br> とてもたのしかったです。<br><br> りょうではあまり日本のりょうりをたべませんが、<br> お母さんのりょうりはとてもおいしかったです。<br> それから、きものをありがとうございました。<br> とてもきれいなきものですね。<br><br> かんこくにもあそびに来てください。<br> 私はソウルのおもしろいところを知っていますから、<br> あんないします。<br><br> スー・キム<br> sue@genkinihongo.com </p> </div> <div class="columns-2 clear" style="text-align:right;"> <div> りょう　dormitory<br> </div> <div> あんないする　to show someone around </div> </div>
Kanji Practice: Write the Readings - Lesson 15 <div class="columns-2 count-problems small-margin clear"> <div> <div class="problem">生まれる　{うまれる}</div> <div class="problem">一年中　　{いちねんじゅう}</div> <div class="problem">人気　　　{にんき}</div> <div class="problem">お金　　　{おかね}</div> <div class="problem">二十万人　{にじゅうまんにん}</div> <div class="problem">楽しむ　　{たのしむ}</div> <div class="problem">地下　　　{ちか}</div> <div class="problem">町　　　　{まち}</div> <div class="problem">近く　　　{ちかく}</div> <div class="problem">有名　　　{ゆうめい}</div> </div> <div> <div class="problem">神社　{じんじゃ}</div> <div class="problem">青い　{あおい}</div> <div class="problem">色　　{いろ}</div> <div class="problem">赤い　{あかい}</div> <div class="problem">南　　{みなみ}</div> <div class="problem">今年　{ことし}</div> <div class="problem">今度　{こんど}</div> <div class="problem">古い　{ふるい}</div> <div class="problem">手　　{て}</div> </div> </div>