README.md

repeatio.de
Start Learning Today

Warning

• Regularly backup your data by exporting your modules and bookmarked questions!
• Clearing the browser cache (e.g. before an exam) will result in the loss of your data!
• Some UI elements are currently not working (e.g. module progress)!

🎬 Watch the Tutorial

Module

Create a new Module

1. Click on Add Module in the Module Overview
2. Fill in the fields under Create new Module
   • ID: The ID of the module has to be unique!
   • Name: The full name of the new module.
   • Language: The language is used for spellchecking when creating a question.
   • Compatibility Version: This value describes when the module was created. The user can't change this value.
3. Click on Create
4. The new module will appear in the Module Overview and can be viewed by clicking on View >

Import an existing Module

1. Click on Add Module in the Module Overview
2. Either click on Browse files and select the file(s) your-file.json or drag and drop the file(s) into the dotted area
3. Finally click on Add
4. The new module will appear in the Module Overview and can be viewed by clicking on View >

Warning

If the module already exist in your modules it will be completely overwritten with the imported module!

Export a Module

1. In the Module Overview click on the 3 dots (⋮) in the module you want to export
2. Click on Export
3. Depending on the browser you will either be prompted to choose a file location or the module will be downloaded directly to the default download location

Delete a Module

1. In the Module Overview click on the 3 dots (⋮) in the module you want to delete
2. Click on Delete

Practice Modes

You can practice your questions in chronological (default) or random order.
There is also the option to just train with bookmarked questions.

Chronological

The questions are in order that they were created in.

Random

The order of the questions is random but each question will only be shown once.

Bookmarked

To practice with the questions you bookmarked navigate to the module and click the Start > button inside Bookmarked Questions.
The questions are in the order that they were saved in. Read how to bookmark a question.

Adding and editing Questions

Add a new Question

1. Inside the module you want to add a question find the card Add Question and click on Add >.
2. Fill in the required fields (Learn more about the Question Editor)
3. Click on Add or Add + View
4. The question will be added to the end of the existing questions

Edit a existing Question

1. Click on the edit button inside a question
   
2. Fill in the required fields (Learn more about the Question Editor)
3. Click on Update

Note

On mobile you may have to first extend the bottom of the navigation

Question Editor

Fields

Field	Description	Styleable?	Required?
id	The unique id of the questions	❌	✔️
title	The title of the question	✔️	❌
points	Max point value of a question	❌	❌
type	The type of the question	❌	✔️
help	Explain what the user needs to do	✔️	❌
answerOptions	The interactive part of the question	✔️	✔️

Question Types

Multiple-Choice

Multiple-Choice questions have exactly one correct answer and are characterized by a circle in front of each option.

Example:

You can add and edit this type of question through the normal UI.

Multiple-Response

Multiple-Response questions can have multiple correct answers and are characterized by a square in front of each option.

Example:

You can add and edit this type of question through the normal UI.

Gap Text

Gap Text questions require the user to fill in the missing words. In the editor a gap is created by wrapping the correct word(s) inside square brackets and separating multiple correct words with a semicolon like this: [correct; right].

Example:

You can add and edit this type of question through the normal UI.

Gap Text Dropdown

The question type Gap Text Dropdown requires the user to select the correct answer for a gap from a dropdown list. A gap is created by a square bracket.

Example:

You can not add this type of question through the normal UI. Download the module and edit the raw .json file!

.json:

{
  "id": "qID-4",
  "title": "This is a question of the type gap text with preselected values for each gap. Each gap is rated independently, meaning that part points are possible. Choose the correct values for each gap in the following text.",
  "points": 5,
  "type": "gap-text-dropdown",
  "help": "Fill in the blanks with the **correct** Values!",
  "answerOptions": {
    "text": "Possible values for each gap can be selected from a []-list. If the user answers 50% of the gaps correctly, he will be awarded [] of the points.",
    "dropdowns": [
      {
        "id": "select-0",
        "options": [
          "Dropdown",
          "Pickup",
          "empty"
        ],
        "correct": "Dropdown"
      },
      {
        "id": "select-1",
        "options": [
          "0%",
          "25%",
          "50%",
          "75%",
          "100%"
        ],
        "correct": "50%"
      }
    ]
  }
}

Result

Extended-Match

Connect the dots with the extended-match question type.

Example:

You can add and edit this type of question through the normal UI.

Styling

Repeatio supports styling with Markdown and HTML for the following elements: title, help and answerOptions.
Try to always style these elements with Markdown first and only use HTML if markdown doesn't have the desired effect.
This is for example the case if you want to use css, escape the default styling or have multiple line breaks.

Line Breaks

Line breaks in markdown can be archived by hitting the enter key.

Type	Markdown	HTML	Result
Single line break	Top Text New line	Top Text <br /> New line	Top Text New line
Multiple line break	Text broken [1] into multiple lines	Text broken <br /><br />into multiple lines	Text broken into multiple lines

[1]: Notice how there are two blank spaces!

Emphasis (strong, italic, strikethrough, code, underline)

Type	Markdown	HTML	Result
strong	**text**	<b>text</b>	text
italic	*text* or _text_	<i>text</i>	text
strong and italic	***text***	<b><i>text</i></b>	text
strikethrough	~~text~~	<s>text</s>	text
code	`text`	<code>text</code>	text
underline		<u>text</u>	text

Ignoring Markdown formatting

Use backslashes to ignore the markdown syntax.

Input	Result
This \*text is unaffected\* by markdown	This *text is unaffected* by markdown

Lists

You can use unordered and ordered lists.

Type	Markdown	HTML	Result
Unordered List	some text... - First unordered item - Another item - Last item Text outside list	some text... <ul> <li>First unordered item</li> <li>Another item</li> <li>Last item</li> </ul> Text outside list	some text... First unordered list item Another item Last item Text outside list
Ordered List	some text... 1. First ordered item 2. Another item 3. Last item Text outside list	some text... <ol> <li>First ordered list item</li> <li>Another item</li> <li>Last item</li> </ol> Text outside list	some text... First ordered list item Another item Last item Text outside list

[!WARNING]
To exit a list in markdown you have to add a blank line between the list and the following content or add two to blank spaces at the end of the last list item

[!NOTE]
Unordered list in markdown can use asterisks (*), minuses (-) or pluses (+).

Tables

Markdown	HTML	Result
some text | Heading 1 | Heading 2 | | --------- | :-------: | | Item 1 | Item 2 | | Item 3 | Item 4 | Text outside table	some text... <table> <tr> <th>Heading 1</th> <th style="text-align:center">Heading 2</th> </tr> <tr> <td>Item 1</td> <td style="text-align:center">Item 2</td> </tr> <tr> <td>Item 3</td> <td style="text-align:center">Item 4</td> </tr> </table> Text outside table	some text Heading 1 Heading 2 Item 1 Item 2 Item 3 Item 4 Text outside table

[!NOTE]
Use the following syntax below the heading to align items in a markdown table:

• left (| :------- |) is optional as it is identical to | ------- |
• center (| :-------: |)
• right (| -------: |)

Images

Display images by adding !, wrapping the alt text inside [] and then wrapping the link for the image in parentheses ().

Markdown	HTML	Result
	<img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Markdown.png" alt="md" />

CSS

Use inline css in combination with html to style an element.

Input	Result
This text is unaffected <p style="color: lightblue; font-weight: 700">I am blue</p>

[!NOTE]
Using html elements may overwrite the default styling!

Math (LaTeX)

Repeatio uses LaTeX to render mathematical functions.
Write the function inside two dollar signs ($).

Input	Result
$x =\frac{\sqrt{20}}{3\times(5-10)^2}$	$x =\frac{\sqrt{20}}{3\times(5-10)^2}$

Here is a detailed guide.

Delete Question

To delete a question click on the trash icon.

Warning

There is no undo functionality and no confirm dialog. The question will be deleted immediately!

Bookmarked Questions

Bookmark a question to later only train with them.

Add a question to the bookmarked list

1. Click on the bookmark icon in the question
   
2. Inside the module click on Start > inside Bookmarked Questions

Remove a question from the bookmarked list

1. To remove a question from being bookmarked click on the icon again
   

Export bookmarked Questions

If you want to view your bookmarked questions on a different device or browser you need to export them.

1. In the module you want to export the bookmarked questions click on the 3 dots (⋮) inside Bookmarked Questions
2. Now click on Export

3. The browser will either prompt you to choose a file location or download the file directly to the default download folder

Import bookmarked Questions

If you want to view your bookmarked questions on a different device or browser you need to export them.

1. In the module you want to import the bookmarked questions click on the 3 dots (⋮) inside Bookmarked Questions
2. Now click on Import

3. A new window should open where you can choose the file

Clear bookmarked Questions

Use these steps to reset your bookmarked questions.

1. In the module you want to clear the bookmarked questions click on the 3 dots (⋮) inside Bookmarked Questions
2. Now click on Delete

Editing raw JSON

Some question types and features can't yet be used through the UI. Instead users are required to edit the raw JSON file.

Some general tips:

• Fields can not be empty (provide an empty string instead)
• Option fields for a question can be left out, but remember to remove the whole property (key-value pair)
• Normal quotes don't work ("text") use unicode U+201E/U+201C instead („text“) or escape the string like this \"text\"
• .json key-value properties have to be separated by a comma from the next one
• The .json key value (left side of a property) has to be a string

Scripts

These scripts are only for developers.

Clone Repository

git clone https://github.com/Rllyyy/repeatio.git

Install dependencies

yarn install

[!NOTE]
You may need to install yarn first.

Start local server

Website

yarn start

Test

We use Cypress and Jest (in combination with React testing library) for testing. Cypress is used for e2e and component testing while Jest only supports component testing. Please you Cypress instead of Jest if you know how to use it.

Cypress (with UI):

yarn test:cy

yarn cypress open

Cypress (headless):

yarn cypress run --browser chrome

yarn cypress run --browser chrome --component

yarn cypress run --browser chrome && yarn cypress run --browser chrome --component

Jest:

yarn test

yarn test --watchAll

Build

Build website:

yarn build

Serve build locally:

yarn serve