Repository: hedyorg/hedy

Issue:
Replace parts of 'for teachers' page with this presentation
I've made a presentation to make the teacher page look better. This page can be embedded into the English for teachers page. 

This presentation can replace : For teachers — Hedy, Introduction Hedy, Preparations and Teaching with Hedy.
**MIND**: The frequently made mistakes should stay on the page as is, because have not found a proper way to make it look better and still be as handy. 
MIND: The 'My classes' feature should - of course- also stay on this page. 

Here is the link to the presentation: https://view.genial.ly/61680ae0e003960dea8a5e8b/interactive-content-teacher-manual-hedy

And here is the code for embedding it: 
iframe: 
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/61680ae0e003960dea8a5e8b" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>

script: 
<div class="container-wrapper-genially" style="position: relative; min-height: 400px; max-width: 100%;"><video class="loader-genially" autoplay="autoplay" loop="loop" playsinline="playsInline" muted="muted" style="position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);width: 80px;height: 80px;margin-bottom: 10%"><source src="https://static.genial.ly/resources/panel-loader-low.mp4" type="video/mp4" />Your browser does not support the video tag.</video><div id="61680ae0e003960dea8a5e8b" class="genially-embed" style="margin: 0px auto; position: relative; height: auto; width: 100%;"></div></div><script>(function (d) { var js, id = "genially-embed-js", ref = d.getElementsByTagName("script")[0]; if (d.getElementById(id)) { return; } js = d.createElement("script"); js.id = id; js.async = true; js.src = "https://view.genial.ly/static/embed/embed.js"; ref.parentNode.insertBefore(js, ref); }(document));</script>

Replace parts of 'for teachers' page with this presentation
I've made a presentation to make the teacher page look better. This page can be embedded into the English for teachers page. 

This presentation can replace : For teachers — Hedy, Introduction Hedy, Preparations and Teaching with Hedy.
**MIND**: The frequently made mistakes should stay on the page as is, because have not found a proper way to make it look better and still be as handy. 
MIND: The 'My classes' feature should - of course- also stay on this page. 

Here is the link to the presentation: https://view.genial.ly/61680ae0e003960dea8a5e8b/interactive-content-teacher-manual-hedy

And here is the code for embedding it: 
iframe: 
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/61680ae0e003960dea8a5e8b" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>

script: 
<div class="container-wrapper-genially" style="position: relative; min-height: 400px; max-width: 100%;"><video class="loader-genially" autoplay="autoplay" loop="loop" playsinline="playsInline" muted="muted" style="position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);width: 80px;height: 80px;margin-bottom: 10%"><source src="https://static.genial.ly/resources/panel-loader-low.mp4" type="video/mp4" />Your browser does not support the video tag.</video><div id="61680ae0e003960dea8a5e8b" class="genially-embed" style="margin: 0px auto; position: relative; height: auto; width: 100%;"></div></div><script>(function (d) { var js, id = "genially-embed-js", ref = d.getElementsByTagName("script")[0]; if (d.getElementById(id)) { return; } js = d.createElement("script"); js.id = id; js.async = true; js.src = "https://view.genial.ly/static/embed/embed.js"; ref.parentNode.insertBefore(js, ref); }(document));</script>



Discussion:
 Here is the Dutch version: https://view.genial.ly/61683769d5ca3c0db5015c9a/interactive-content-hedy-nl-teacher-manual 
@TiBiBa This might be something for you! Maybe it would be good to sync with @MarleenGilsing directly about what she has in mind?
I think we can code the same view and interaction options through Javascript! Then we don't need an external resource to host the presentation and it will be easier to alter the text and UI later on.
> I think we can code the same view and interaction options through Javascript! Then we don't need an external resource to host the presentation and it will be easier to alter the text and UI later on.

Yes that is exactly what we want, as much as possible using js and text and not images. If you can pick this up that'd be amazing!
@MarleenGilsing An earlier version of this also had a great overview of a new classes system (https://github.com/Felienne/hedy/discussions/775#discussioncomment-1447113)  Has that been removed form the demo (I think that would be best!) I don't see it anymore but I am not sure it is really gone.
There is a pretty nice presentation framework for javascript: https://revealjs.com I don't think it will be possible to exactly reproduce the linked presentation, but it allows adding links from one slide to another. It also allows embedding anything potentially relevant, like iframes (eg to show parts of the site itself) and the code editor (to show example hedy code).
> There is a pretty nice presentation framework for javascript: https://revealjs.com I don't think it will be possible to exactly reproduce the linked presentation, but it allows adding links from one slide to another. It also allows embedding anything potentially relevant, like iframes (eg to show parts of the site itself) and the code editor (to show example hedy code).

Thanks but we don't really want slides, that was just a way for Marleen to express her thoughts (she is not a programmer)
I will look into it on monday! Might be worth the effort to change the for-teacher page to a .html and .yaml structure now we are planning to make such big changes.
 Here is the Dutch version: https://view.genial.ly/61683769d5ca3c0db5015c9a/interactive-content-hedy-nl-teacher-manual 
@TiBiBa This might be something for you! Maybe it would be good to sync with @MarleenGilsing directly about what she has in mind?
I think we can code the same view and interaction options through Javascript! Then we don't need an external resource to host the presentation and it will be easier to alter the text and UI later on.
> I think we can code the same view and interaction options through Javascript! Then we don't need an external resource to host the presentation and it will be easier to alter the text and UI later on.

Yes that is exactly what we want, as much as possible using js and text and not images. If you can pick this up that'd be amazing!
@MarleenGilsing An earlier version of this also had a great overview of a new classes system (https://github.com/Felienne/hedy/discussions/775#discussioncomment-1447113)  Has that been removed form the demo (I think that would be best!) I don't see it anymore but I am not sure it is really gone.
There is a pretty nice presentation framework for javascript: https://revealjs.com I don't think it will be possible to exactly reproduce the linked presentation, but it allows adding links from one slide to another. It also allows embedding anything potentially relevant, like iframes (eg to show parts of the site itself) and the code editor (to show example hedy code).
> There is a pretty nice presentation framework for javascript: https://revealjs.com I don't think it will be possible to exactly reproduce the linked presentation, but it allows adding links from one slide to another. It also allows embedding anything potentially relevant, like iframes (eg to show parts of the site itself) and the code editor (to show example hedy code).

Thanks but we don't really want slides, that was just a way for Marleen to express her thoughts (she is not a programmer)
I will look into it on monday! Might be worth the effort to change the for-teacher page to a .html and .yaml structure now we are planning to make such big changes.

Resolving patch:
diff --git a/app.py b/app.py
--- a/app.py
+++ b/app.py
@@ -964,7 +964,6 @@ def split_teacher_docs(contents):
             sections.append({'title': tag, 'content': ''})
         else:
             sections[-1]['content'] += str(tag)
-
     return sections
 
 def render_main_menu(current_page):


Test patch: