Other Components

User Guide → Other Components

Others

This page lists some other components that may be useful in creating education websites. For now, there are only question and quiz components.

Questions and Quizzes

Question and quiz components provide an easy way to test readers on the relevant content topic in the page.

Introduction

Question components (<question>) can be one of the following types: MCQ, Checkbox, Fill-in-the-Blanks, or Text.

In all cases, content directly inserted in between <question>...</question> will be inserted into the question body.

You can also insert markdown into the header or hint box, by using the header and hint attributes respectively. Click the hint button below to see how the hint box turns out!

CODE:

Header and Hint syntax
<!-- Insert markdown into the header and hint using the respective attributes -->
<question type="checkbox" header="Which of the following is correct?" hint="Think out of the box! :fas-box:">

  <!-- Anything you place directly under a question not in a slot is inserted into the question body! -->
  <small>Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)
  </small>
  </pic>

  <!-- Several hidden checkbox q-option components explained later -->
</question>

OUTPUT:

Which of the following is correct?

math question image

Adapted from Daily Mail

If you require more expressive formatting for your header or hint markup, you can use the <div slot="header"> and <div slot="hint"> slots. Expand the panel below to see an example!

Header and Hint example with slots

Placing the question into the header is entirely optional. You may also wish to include the question directly in the question body, omitting the header entirely.

Options and Slots common to all question types

Name Type Default Description
type String '' The type of question. Supports mcq, checkbox, blanks, or text.
header[S] String '' The markup to insert into the question header. The header is omitted if this is not provided.
hint[S] String '' The content to display in the hint box.

MCQ and Checkbox Questions

MCQ and checkbox questions are indicated with the type="mcq" or type="checkbox" attribute.

In both instances, you can include the possible answers using the <q-option> component, placed anywhere inside the . To indicate the correct option(s), add the <q-option correct> attribute.

Optionally, you can provide the reason for the particular option using the <q-option reason="..."> attribute, or the <div slot="reason"> slot for more expressive formatting, similar to the hint and header options and slots.

MCQ Questions

CODE:

<question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
  <!-- Insert the reason for the option using the reason attribute -->
  <q-option reason="This is **correct**. We need to figure out if a positive test case works!">
    Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
  </q-option>
  <q-option>
    It is ok to combine valid values for different inputs.
  </q-option>
  <q-option>
    No more than one invalid test input should be in a given test case.
  </q-option>
  <!-- Use the 'correct' attribute to indicate an option as correct. -->
  <q-option correct>
    All invalid test inputs must be tested together.
    <!-- Optionally, you may use a reason slot instead of a reason attribute. -->
    <div slot="reason">
    If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled
    correctly by the SUT.
    This is because most SUTs return an error message upon encountering the first invalid input.
    </div>
  </q-option>
  <div slot="hint">
  How do you figure out which inputs are wrong? (or correct)
  </div>
</question>

OUTPUT:

Which of these contradicts the heuristics recommended when creating test cases with multiple inputs?

Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
It is ok to combine valid values for different inputs.
No more than one invalid test input should be in a given test case.
All invalid test inputs must be tested together.
MCQ questions can have multiple correct options!

Checkbox Questions

CODE:

<question type="checkbox" hint="Use your calculator! :fas-calculator:">

  ###### Which of the following is true?

  <br>
  <q-option reason="lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum">
    1 + 1 = 11
  </q-option>
  <q-option reason="Division by zero is **undefined**!">
    1 / 0 = infinity
  </q-option>
  <q-option correct>
  11 / 11 = 1
  </q-option>
</question>

OUTPUT:

Which of the following is true?

q-option Options and Slots

Name Type Default Description
correct Boolean false Whether this option (placed under either a MCQ or checkbox question) is correct. You may have multiple correct answers in either case.
reason[S] String '' The explanation markup to display for the option once the answer is checked.

Fill-in-the-Blanks Questions

Fill-in-the-blanks questions are specified with the type="blanks" attribute.

Unlike MCQ and checkbox questions, answer checking is performed for each blank by providing keywords to check for in the user's answer through the keywords attribute in each q-option. If no keywords are provided, the answer for that blank will always be marked as correct.

Keywords are validated by checking if the keyword matches the user's answer exactly (ignoring letter casing). This works well for some and not others.

CODE:

<question type="blanks" hint="Google it!">

  ###### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.

  <q-option keywords="Norbert Elias, Elias" reason="That's his name!"></q-option>
  <q-option keywords="figuration"></q-option>
</question>

OUTPUT:

German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.

By default, if the question has yet to be answered correctly, intermediate results will be shown beside each blank. You can specify a no-intermediate-result attribute to avoid this behvaiour (i.e. hide the result of each blank upon incorrect attempts).

Since the validation is imperfect, the minimum proportion of correct blanks needed for the entire question to be marked as correct can also be changed using the threshold attribute.

If you don't want to validate the answer at all, you may set the threshold attribute to 0. Doing so always marks the entire question correct, and users will be able to see all intended answers.

CODE:

<question type="blanks" hint="What properties would you want these database transactions to have?" threshold=0.75 no-intermediate-result>

  ###### In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________.

  <q-option keywords="Atomicity, Atomic" reason="Meaning: either all occurs or nothing occurs"></q-option>
  <q-option keywords="Consistency, Consistent"></q-option>
  <q-option keywords="Isolation, Isolated"></q-option>
  <q-option keywords="Durability, Durable"></q-option>
</question>

OUTPUT:

In computer science, ACID is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps. These properties are: A for __________, C for __________, I for __________, and D for __________.

Fill-in-the-Blanks Question specific Options and Slots

Name Type Default Description
threshold Number 0.5 Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.
no-intermediate-result Boolean False Hides the result of each blank after an incorrect attempt.

q-option Options and Slots

Name Type Default Description
keywords String '' Comma delimited string of keywords or phrases to match the user's answer against.
reason[S] String '' The explanation markup to display for the option once the answer is checked.

Text Questions

Text questions are specified with the type="text" attribute.

Unlike MCQ and checkbox questions, answer checking is performed by providing keywords to check for in the user's answer through the keywords attribute. If no keywords are provided, the answer will always be marked as correct when placed in quizzes.

Keywords are validated by simply looking for the keyword as a pattern in the user's answer! This works well for some and not others.

You can provide your answer in the answer attribute, or similarly, the <div slot="answer"> slot for more expressive formatting.

CODE:

<question type="text" header="Which country did the Hawaiian pizza originate from?"
          keywords="hawaii" threshold="0.5" answer="It originated from Hawaii!">
  <div slot="hint">

  Watch some pizza commercials! :tv:

  :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:
  </div>
</question>

OUTPUT:

Which country did the Hawaiian pizza originate from?

Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the threshold attribute.

If you don't want to validate the answer at all, you may also omit the keywords attribute entirely. Doing so also always marks the question as correct inside quizzes.

Text Question specific Options and Slots

Name Type Default Description
keywords String '' Comma delimited string of keywords or phrases to match the user's answer against.
threshold Number 0.5 Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.
answer[S] String '' The answer or explanation to display when the user clicks the check button.

Quizzes

You can also build a series of questions out of multiple <question> components.

Simply place the <question> components you want to include into the <quiz> component! No extra configuration is needed.

CODE:

<quiz>
  <question type="mcq">...</question>
  <question type="checkbox">...</question>
  <question type="blanks">...</question>
  <question type="text">...</question>
</quiz>

OUTPUT:

Click start to begin

0 questions

Quiz Options and Slots

Name Type Default Description
intro String '' Quiz intro markup above the question count.
intro Slot Click start to begin Quiz intro markup. Overrides the intro attribute if both are present.
MCQ and Checkbox questions
<!-- use type="checkbox" for checkbox questions -->

<question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
  <!-- Insert the reason for the option using the reason attribute -->
  <q-option reason="This is **correct**. We need to figure out if a positive test case works!">
    Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
  </q-option>
  <q-option>
    It is ok to combine valid values for different inputs.
  </q-option>
  <q-option>
    No more than one invalid test input should be in a given test case.
  </q-option>
  <!-- Use the 'correct' attribute to indicate an option as correct. -->
  <q-option correct>
    All invalid test inputs must be tested together.
    <!-- Optionally, you may use a reason slot instead of a reason attribute. -->
    <div slot="reason">
    If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled
    correctly by the SUT.
    This is because most SUTs return an error message upon encountering the first invalid input.
    </div>
  </q-option>
  <div slot="hint">
  How do you figure out which inputs are wrong? (or correct)
  </div>
</question>
Fill-in-the-Blanks questions

<question type="blanks" hint="Google it!">

  ###### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.

  <q-option keywords="Norbert Elias, Elias" reason="That's his name!"></q-option>
  <q-option keywords="figuration"></q-option>
</question>
Text questions

<question type="text" header="Which country did the Hawaiian pizza originate from?"
          keywords="hawaii" threshold="0.5" answer="It originated from Hawaii!">
  <div slot="hint">

  Watch some pizza commercials! :tv:

  :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:
  </div>
</question>
Quiz
<quiz>
  <question type="mcq">...</question>
  <question type="checkbox">...</question>
  <question type="blanks">...</question>
  <question type="text">...</question>
</quiz>

Click start to begin

0 questions

Navigation Components

Advanced Component Usage