Difference between revisions of "Flow"

Revision as of 12:30, 18 September 2024

A flow is an overlay that is displayed before the user attempts an exercise level. This flow should typically contain an overview description of the level with some images, quizzes, and/or interactive canvas.

Tags

Levels

Flows can be separated for differend levels, so that each level has it's own flow. To write a flow specific to a level the [level?] tag is used - where ? is the level number from 1 to N.

Example of level separation:

[level1] This is shown during the flow for Level 1. [/level1]
[level2] This is shown during the flow for Level 2 [/level2]

Continuance Buttons

There are two predefined buttons that can be included for the user to press to continue inside the flow or exit it.

The [continue] button is a self closing tag that does not take any content. It defined the end of a segment within the flow so that everything below it is hidden until the user presses the button.

The [coding] button is used as a final button in the flow for the user to exit the flow and go back to the coding editor. It takes a body which is the content of the button.

Example of start coding:

[coding]Start coding[/coding]

Quiz

A quiz is a quistion/answer section that the user can interact with and get either right or wrong.

Tags
Name	Description
quiz	The main wrapping tag
question	The question that is prompted to the user
hint	A hint to the user that can help it if needed
explanation	A more detailed explanation of the question's context
option-correct	The correct answer to the quiz
option	An incorrect answer to the quiz
feedback-correct	The text that is shown to the user if it answers correctly
feedback-incorrect	The text that is shown to the user if it answers incorrectly

Note that all tags are requried, but if for example [hint] or [explanation] is left empty they will not render in the flow.

Example of a quiz

[quiz]
  [question]What is the main operation performed by Bubble Sort?[/question]
  [hint]Consider what happens after a comparison shows two elements not in order[/hint]
  [explanation]Swap is the action of switching the position of two elements which are not sorted.[/explanation]

  [option-correct]Swapping[/option-correct]
  [option]Merging[/option]
  [option]Insertion[/option]
  [option]Splitting[/option]

  [feedback-correct]Good job![/feedback-correct]
  [feedback-incorrect]Almost there[/feedback-incorrect]
[/quiz]

@@ Line 17: / Line 17: @@
 There are two predefined buttons that can be included for the user to press to continue inside the flow or exit it.
-The [continue] button is a self closing tag that does not take any content. It defined the end of a segment within the flow so that everything below it is hidden until the user presses the button.
-The [coding] button is used as a final button in the flow for the user to exit the flow and go back to the coding editor. It takes a body which is the content of the button.
+The '''[continue]''' button is a self closing tag that does not take any content. It defined the end of a segment within the flow so that everything below it is hidden until the user presses the button.
+The '''[coding]''' button is used as a final button in the flow for the user to exit the flow and go back to the coding editor. It takes a body which is the content of the button.