Difference between revisions of "Flow"
From Future Skill
| Line 8: | Line 8: | ||
| − | '''Example:''' | + | '''Example of level separation:''' |
[level1] This is shown during the flow for Level 1. [/level1] | [level1] This is shown during the flow for Level 1. [/level1] | ||
[level2] This is shown during the flow for Level 2 [/level2] | [level2] This is shown during the flow for Level 2 [/level2] | ||
| − | === Buttons === | + | === 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 === | === Quiz === | ||
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.
Contents
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.
| 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]