KISS Template to Create a Quiz with Remembered Button

Tips & Tricks
#1

Objective

The tip purpose is to show you how simply you can create a quiz using vanilla Tiddlywiki. Tiddlywiki is very powerful in itself and this example uses template feature.

KISS → Keep It Simple Stupid

HowTo

  • Create a set of questions

    • each question in one tiddler (card)
    • use title for question
    • use text for answer

  • Tag all questions with quiz (or what you like)

  • Next create the Quiz

  • In a tiddler say My Quiz put the below wikitext

<$let host=<<currentTiddler>> >
<$list filter="[tag[quiz]] :except[<host>get[remembered]enlist-input[]]" template="tpl-quiz"/>
</$let>
  • Save and see the quiz.

How it works

  • All questions are shown using details html tag
  • Questions are visible, answer are hidden
  • Click show answer, to see the answer
  • Click Remembered if you have given the correct answer
  • NOTE: Any remembered question will be excluded from quiz
  • You can reset the quiz.

Demo: Countries and Cities

Exercises

E1. Prettify the buttons (reset and remembered) to better suit your UI
E2. Prettify the question by styling the details tag
E3. Show one question at a time

2 Likes
Need Help: List Item Template - Generate Reports
#2

:star_struck: Solve the Exercises and Win 10 USD for Each Correct Answer :star_struck:

You can win 10 USD if you send the correct answer for each exercise above!

Fun time:

To participate in the quiz you need to pay 50 USD in advance. :wink: :wink:

#3

Nice and clean!

To simplify even more: use the storyTiddler variable, avoid using action widget in the button widget when possible and make use of the new listfield feature of the checkbox widget:

<$list filter="[tag[quiz]!enlist{!!remembered}]">
<details>
<summary>{{!!title}}</summary><p>

<<<
<$transclude />

<$checkbox listField="remembered"  checked={{!!title}} tiddler=<<storyTiddler>> >
Ok ?
</$checkbox>
<<<

</p></details>
</$list>

<$button set="!!remembered">reset</$button>
1 Like
#4

Thank you @telumire. Great improvement!

I just think the below code pattern is belong to early time of Tiddlywiki development.

So, I would prefer the below

<$button setTitle=<<storyTiddler>> setField="remembered" >reset</$button>
2 Likes