Difference between revisions of "Flow"
From Future Skill
(13 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
== Tags == | == Tags == | ||
+ | |||
=== Levels === | === 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. | + | 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:''' | '''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] | ||
+ | |||
+ | ''Note that the level tags should be placed on separate rows.'' | ||
− | === | + | === Continue and Coding Buttons === |
There are two predefined buttons that can be included for the user to press to continue inside the flow or exit it. | 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 '''[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 '''[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:''' | '''Example of start coding:''' | ||
[coding]Start coding[/coding] | [coding]Start coding[/coding] | ||
+ | |||
+ | |||
+ | ''Note that it is not possible to have any continue/coding buttons inside language tags (ex. [english][/english]) and also note that [continue] and [coding] tags should be placed on their own rows. | ||
+ | '' | ||
=== Quiz === | === Quiz === | ||
− | A quiz is a | + | A quiz is a question/answer section that the user can interact with and get either right or wrong. |
{| class="wikitable" style="margin:auto" | {| class="wikitable" style="margin:auto" | ||
Line 55: | Line 64: | ||
− | ''Note that all tags are | + | ''Note that '''all tags are required''', but if for example [hint] or [explanation] is left empty they will not render in the flow.'' |
Line 74: | Line 83: | ||
[/quiz] | [/quiz] | ||
+ | |||
+ | A [continue] tag is often needed after the quiz. | ||
=== Interact === | === Interact === | ||
− | You can add a canvas from one of the | + | You can add a canvas from one of the levels in a flow. This can be done using the '''[interact-?]''' tag - where '''?''' is the level number from 1 to N. |
'''Example of interact''' | '''Example of interact''' | ||
[interact-1] | [interact-1] | ||
+ | |||
+ | |||
+ | ''A [continue] tag is needed before and after the interact tag.'' | ||
+ | |||
+ | === Other tags === | ||
+ | |||
+ | Several other tags which work in the Description are also supported in the flow, such as: | ||
+ | |||
+ | * Language tags, e.g. [swedish] and [english] | ||
+ | * Programming language tags, e.g. [python] and [c|cpp] | ||
+ | * Switches with default, for example: | ||
+ | <nowiki> | ||
+ | [switch] | ||
+ | [python]"is" or "==" depending on what you are comparing[/python] | ||
+ | [javascript|typescript]===[/javascript|typescript] | ||
+ | [default]==[/default] | ||
+ | [/switch] | ||
+ | </nowiki> | ||
+ | * Translation tables, e.g. | ||
+ | <nowiki> | ||
+ | HELLO: *hello | ||
+ | hello - *hello - hello | ||
+ | [translate] | ||
+ | [from]hello[/from] | ||
+ | [python]HELLO!!!![/python] | ||
+ | [c|cpp]_h_e_l_l_o_[/c|cpp] | ||
+ | [default]h e l l o . . .[/default] | ||
+ | [/translate] | ||
+ | |||
+ | [translate] | ||
+ | [from]language[/from] | ||
+ | [c]C[/c] | ||
+ | [c_sharp]C#[/c_sharp] | ||
+ | [cpp]C++[/cpp] | ||
+ | [go]Go[/go] | ||
+ | [java]Java[/java] | ||
+ | [javascript]Javascript[/javascript] | ||
+ | [kotlin]Kotlin[/kotlin] | ||
+ | [php]PHP/php] | ||
+ | [python]Python[/python] | ||
+ | [ruby]Ruby[/ruby] | ||
+ | [rust]Rust[/rust] | ||
+ | [scala]Scala[/scala] | ||
+ | [typescript]Typescript[/typescript] | ||
+ | [default]the programming language at hand[/default] | ||
+ | [/translate] | ||
+ | </nowiki> |
Latest revision as of 12:16, 25 October 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]
Note that the level tags should be placed on separate rows.
Continue and Coding 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]
Note that it is not possible to have any continue/coding buttons inside language tags (ex. [english][/english]) and also note that [continue] and [coding] tags should be placed on their own rows.
Quiz
A quiz is a question/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 required, 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]
A [continue] tag is often needed after the quiz.
Interact
You can add a canvas from one of the levels in a flow. This can be done using the [interact-?] tag - where ? is the level number from 1 to N.
Example of interact
[interact-1]
A [continue] tag is needed before and after the interact tag.
Other tags
Several other tags which work in the Description are also supported in the flow, such as:
- Language tags, e.g. [swedish] and [english]
- Programming language tags, e.g. [python] and [c|cpp]
- Switches with default, for example:
[switch] [python]"is" or "==" depending on what you are comparing[/python] [javascript|typescript]===[/javascript|typescript] [default]==[/default] [/switch]
- Translation tables, e.g.
HELLO: *hello hello - *hello - hello [translate] [from]hello[/from] [python]HELLO!!!![/python] [c|cpp]_h_e_l_l_o_[/c|cpp] [default]h e l l o . . .[/default] [/translate] [translate] [from]language[/from] [c]C[/c] [c_sharp]C#[/c_sharp] [cpp]C++[/cpp] [go]Go[/go] [java]Java[/java] [javascript]Javascript[/javascript] [kotlin]Kotlin[/kotlin] [php]PHP/php] [python]Python[/python] [ruby]Ruby[/ruby] [rust]Rust[/rust] [scala]Scala[/scala] [typescript]Typescript[/typescript] [default]the programming language at hand[/default] [/translate]