Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 100 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,4 +138,103 @@ In different terminals:
```
$ conda activate dnanalyzer
$ ./bin/ari-make.sh <path to slide>
```
```

## How can I add a new level to the game?

1. Create a new directory game/levelX, where X is the number of new level.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. Create a new directory game/levelX, where X is the number of new level.
1. Create a new folder `game/levelX`, where X is the number of new level.


2. In game/levelX:

- Create slides.html using markdown pattern:

```
---
layout: slides
title: Level X - <title of level>

---
### Title
content of slide
![alternative text for image] (images/<name of image file>)

[Source/link to original image]

???

Text for the voice
Split by sentence
1 sentence starting with “-”

```

- Create a folder “images”, put all images used in slides.html for this level there

- Create index.md using pattern:

For NOT last level:

```
---
layout: level
title: DNAnalyzer
description: 'Level X - <name of level>’
image: /images/index.png
quiz: <Embed HTML of google form used for this level quiz>
scores: <Embed HTML of google sheets used for this level scores>
---

[**Next level**]({{ site.baseurl }}{% link game/level<X+1>/index.md %}){:.button .is-link .is-large}
```

For last level:

```
---
layout: level
title: DNAnalyzer
description: 'Level X - <name of level>’
image: /images/index.png
quiz: <Embed HTML of google form used for this level quiz>
scores: <Embed HTML of google sheets used for this level scores>
---

[**Results**](http://streetscience.community/DNAnalyzer/index#results){:.button .is-link .is-large}
```

- Generate video (see section “Generate videos”) from slides.html. Add video with name video.mp4
Comment on lines +147 to +205
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
2. In game/levelX:
- Create slides.html using markdown pattern:
```
---
layout: slides
title: Level X - <title of level>
---
### Title
content of slide
![alternative text for image] (images/<name of image file>)
[Source/link to original image]
???
Text for the voice
Split by sentence
1 sentence starting with “-”
```
- Create a folder “images”, put all images used in slides.html for this level there
- Create index.md using pattern:
For NOT last level:
```
---
layout: level
title: DNAnalyzer
description: 'Level X - <name of level>’
image: /images/index.png
quiz: <Embed HTML of google form used for this level quiz>
scores: <Embed HTML of google sheets used for this level scores>
---
[**Next level**]({{ site.baseurl }}{% link game/level<X+1>/index.md %}){:.button .is-link .is-large}
```
For last level:
```
---
layout: level
title: DNAnalyzer
description: 'Level X - <name of level>’
image: /images/index.png
quiz: <Embed HTML of google form used for this level quiz>
scores: <Embed HTML of google sheets used for this level scores>
---
[**Results**](http://streetscience.community/DNAnalyzer/index#results){:.button .is-link .is-large}
```
- Generate video (see section “Generate videos”) from slides.html. Add video with name video.mp4
2. In `game/levelX` folder
1. Create `slides.html` file and write content in Markdown, with some metadata in YAML on the top:
```
---
layout: slides
title: Level X - <title of level>
---
### Title
content of slide
![alternative text for image](images/<name of image file>)
[Source/link to original image]()
???
- Text for the voice
- Split by sentence
- 1 sentence starting with "-”
```
2. Create a folder `images`, put all images used in `slides.html` for this level there
3. Create `index.md` file:
- If **NOT** last level:
```
---
layout: level
title: DNAnalyzer
description: 'Level X - <name of level>’
image: /images/index.png
quiz: <Embed HTML of google form used for this level quiz>
scores: <Embed HTML of google sheets used for this level scores>
---
[**Next level**]({{ site.baseurl }}{% link game/level<X+1>/index.md %}){:.button .is-link .is-large}
```
- If last level:
```
---
layout: level
title: DNAnalyzer
description: 'Level X - <name of level>’
image: /images/index.png
quiz: <Embed HTML of google form used for this level quiz>
scores: <Embed HTML of google sheets used for this level scores>
---
[**Results**](http://streetscience.community/DNAnalyzer/index#results){:.button .is-link .is-large}
```
4. Check the slides and the page:
1. [Launching the website locally](#how-can-i-generate-the-website-locally)
2. Visit
- `http://127.0.0.1:4000/DNAnalyzer/game/levelX/slides.html` for the slides
- `http://127.0.0.1:4000/DNAnalyzer/game/levelX` for the page
4. [Generate video](#generate-videos) from the slides
5. Upload the video and YouTube


### How can I create a quiz for a new level?
Quiz is realized with google forms. Results are located in Google Sheets https://drive.google.com/drive/folders/19Hiaqqvoue3M2YpA-LePUFe81fmZdNbu

1. Create google form with questions based on content of slides.html

- First required question is “Your Username (use the same Username at all levels)”

- Turn on the option “Limit to 1 response”

- Set up correct answers and points for every question

2. Link google form with google sheet

- Create new page”lvlX” in google sheet https://docs.google.com/spreadsheets/d/1lPF_mXTmSa4BJDRjnd6_pwXCia7NDxlDJ6VlRMM0K18/edit#gid=906511743

- Link gform with this page responses -> create google sheet -> select existing google sheet

3. In scores google sheet

- Create page “Level X” which will be cleaned up from unneeded information and shared in game

- Add 2 columns “Username” with formula =’lvlX’!A:A, “Score” with formula =’lvlX’!B:B

- In the page “Results” open hidden columns with levels, add level X with formula ==IFERROR(VLOOKUP(A:A,'Level X'!A:B,2,FALSE),"")

- In column “Max level” add new sum term +IF(ISNUMBER(X:X),1,0) in formula, where X is column for new added level

- In column “Final score” change the range of cells, make sure that cells with a new added level are taken into account.
Comment on lines +207 to +234
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### How can I create a quiz for a new level?
Quiz is realized with google forms. Results are located in Google Sheets https://drive.google.com/drive/folders/19Hiaqqvoue3M2YpA-LePUFe81fmZdNbu
1. Create google form with questions based on content of slides.html
- First required question is “Your Username (use the same Username at all levels)”
- Turn on the option “Limit to 1 response”
- Set up correct answers and points for every question
2. Link google form with google sheet
- Create new page”lvlX” in google sheet https://docs.google.com/spreadsheets/d/1lPF_mXTmSa4BJDRjnd6_pwXCia7NDxlDJ6VlRMM0K18/edit#gid=906511743
- Link gform with this page responses -> create google sheet -> select existing google sheet
3. In scores google sheet
- Create page “Level X” which will be cleaned up from unneeded information and shared in game
- Add 2 columns “Username” with formula =’lvlX’!A:A, “Score” with formula =’lvlX’!B:B
- In the page “Results” open hidden columns with levels, add level X with formula ==IFERROR(VLOOKUP(A:A,'Level X'!A:B,2,FALSE),"")
- In column “Max level” add new sum term +IF(ISNUMBER(X:X),1,0) in formula, where X is column for new added level
- In column “Final score” change the range of cells, make sure that cells with a new added level are taken into account.
### How can I create a quiz for a new level?
Quiz is realized with google forms. Results are located in [Google spreadsheet](https://drive.google.com/drive/folders/19Hiaqqvoue3M2YpA-LePUFe81fmZdNbu )
1. Create google form with questions based on content of `slides.html`:
- First required question is “Your Username (use the same Username at all levels)”
- Turn on the option “Limit to 1 response”
- Set up correct answers and points for every question
2. Link Google form with Google spreadsheet
- Create new sheet ”lvlX” in [Google spreadsheet](https://docs.google.com/spreadsheets/d/1lPF_mXTmSa4BJDRjnd6_pwXCia7NDxlDJ6VlRMM0K18/edit#gid=906511743)
- Link Google form with this page responses
- Create Google sheet
- Select existing Google sheet
3. In the [scoring Google spreadsheet]()
- Create page “Level X” which will be cleaned up from unneeded information and shared in game
- Add 2 columns
- `Username` with formula `=’lvlX’!A:A`
- “Score` with formula `=’lvlX’!B:B`
- In the sheet “Results”,
- Open hidden columns with levels
- Add a column `level X` with formula `==IFERROR(VLOOKUP(A:A,'Level X'!A:B,2,FALSE),"")`
- In column `Max level`: add new sum term `+IF(ISNUMBER(X:X),1,0)` in formula, where `X` is column for new added level
- In column `Final score`
- Change the range of cells
- Make sure that cells with a new added level are taken into account.


#### Colour codes

#aabeff4b - footer and header colours
#b1c4ff1a - background colour
#E5f0f9 - colour used in gforms and gsheets
Comment on lines +236 to +240
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
#### Colour codes
#aabeff4b - footer and header colours
#b1c4ff1a - background colour
#E5f0f9 - colour used in gforms and gsheets
# Website color code
- Footer and header: `#aabeff4b`
- Background: `#b1c4ff1a`
- Color used in Google forms and spreadsheets: `#E5f0f9`

2 changes: 1 addition & 1 deletion game/level1/slides.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: slides
title: "Level 2: Introduction to the biology"
title: "Level 1 - Introduction to the biology"

---

Expand Down
2 changes: 1 addition & 1 deletion game/level2/slides.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: slides
title: "Level 3: DNA"
title: "Level 2 - DNA"

---

Expand Down
2 changes: 1 addition & 1 deletion game/level3/slides.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: slides
title: "Level 4: Sequencing"
title: "Level 3 - Sequencing"

---

Expand Down
2 changes: 1 addition & 1 deletion game/level4/slides.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: slides
title: "Level 5: Alignment"
title: "Level 4 - Alignment"
---

### Alignment
Expand Down
2 changes: 1 addition & 1 deletion game/level5/slides.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: slides
title: "Level 6: Metagenomics"
title: "Level 5 - Metagenomics"

---

Expand Down