diff --git a/src/app/components/home/_dialogs/demo-video/demo-video.component.html b/src/app/components/home/_dialogs/demo-video/demo-video.component.html
index 2ea877f45ba1627dd3ef5ae94075cad911c3da89..cf30f1379b6d57293df49baa0928b514f0e8c683 100644
--- a/src/app/components/home/_dialogs/demo-video/demo-video.component.html
+++ b/src/app/components/home/_dialogs/demo-video/demo-video.component.html
@@ -1,4 +1,4 @@
-<div class="visually-hidden" tabindex="0" id="selection" mat-dialog-title>
+<div class="visually-hidden" tabindex="-1" id="selection" mat-dialog-title>
<ng-container *ngIf="currentLang=='en'">You're on the frag.jetzt-introduction page. Press 1 to start a demonstration
video, 2 for a transcript of the video, press 3 to get information about the frag.jetzt.
project or 4 to repeat this dialog.
@@ -9,10 +9,10 @@
</ng-container>
</div>
<!--frag.jetz-->
-<h2 tabindex="0" class="modal oldtypo-h2" mat-dialog-title>{{ 'introduction.title' | translate }}</h2>
+<h1 tabindex="0" class="modal oldtypo-h2" mat-dialog-title>{{ 'introduction.title' | translate }}</h1>
<mat-divider></mat-divider>
<mat-dialog-content>
- <div id="setFocus" class="intro-text" tabindex="0">
+ <div id="setFocus" class="intro-text" tabindex="-1">
<app-demo-en *ngIf="currentLang=='en'"></app-demo-en>
<app-demo-de *ngIf="currentLang=='de'"></app-demo-de>
</div>
diff --git a/src/assets/i18n/demo/demo-en.html b/src/assets/i18n/demo/demo-en.html
index 05c4825744c2fb2a9ee51f9051297d82a0733f38..e4e27c23812c52aa4f4bb4ec46bf432415a5d198 100644
--- a/src/assets/i18n/demo/demo-en.html
+++ b/src/assets/i18n/demo/demo-en.html
@@ -1,66 +1,66 @@
-<div id="demoContent" tabindex="3">
- <h2>
+
+ <h2 tabindex="0">
»Do you have any questions?«
</h2>
- <p>The classical lecture usually ends with: »Do you have any questions?« And always nobody answers or the same few
+ <p tabindex="0">The classical lecture usually ends with: »Do you have any questions?« And always nobody answers or the same few
ask. Either nobody dares to ask questions in the large lecture hall or the questions one actually wanted to ask in
the
course of the lecture are forgotten.
- <p>Those who want their lecture to be reflected upon and questioned need a
+ <p tabindex="0">Those who want their lecture to be reflected upon and questioned need a
tool for anonymously asking questions. Such an <a href="https://github.com/thm-projects/frag.jetzt" target="_blank">Open
Source</a> tool is available free of charge with »frag.jetzt«. Are
there any concerns? Is the tool accessible, compliant with the data protection regulations, immediately usable with
any end device without any training or technical understanding? Three times yes.</p>
- <p>If I let »frag.jetzt« be used anonymously and thus without social control, don't I also invite abuse? No, because
+ <p tabindex="0">If I let »frag.jetzt« be used anonymously and thus without social control, don't I also invite abuse? No, because
the
question list can be moderated live by an assistant: Only lecture-appropriate questions remain on the list.
In addition, you can automatically move all new questions to the moderation:
they only become public if you release them individually.
</p>
- <p>But I cannot answer all questions in the last ten minutes of my lecture. Sure. This is where the collective tool
+ <p tabindex="0">But I cannot answer all questions in the last ten minutes of my lecture. Sure. This is where the collective tool
aspect comes into play: Everyone in the audience can rate every question, in other words: to vote up or down. You
can
answer the questions most highly rated by the auditorium immediately, the others, if you wish, later in the course
forum of the learning platform.</p>
- <h3>
+ <h2 tabindex="0">
What's so special about »frag.jetzt«?
- </h3>
+ </h2>
- <p>
+ <p tabindex="0">
The teacher can award bonus points for goal-oriented and lecture-appropriate questions.
Awarded questions receive a star and the student finds an 8-digit number code (»token«) for each star on the session account.
The tokens can be redeemed for bonus points by sending an e-mail to the teacher.
</p>
- <p>
+ <p tabindex="0">
Teachers and moderators can affirm, deny and comment on questions.
That students cannot comment on questions is intentional:
»frag.jetzt« should not be Facebook or Twitter.
If we allowed it, the students would only be busy commenting on their fellow students' questions.
</p>
- <p>
+ <p tabindex="0">
The teacher can define categories (tags) for questions.
The student can tag his or her question with one of the predefined categories.
Categorized questions can be filtered by clicking the tag.
</p>
- <p>
+ <p tabindex="0">
Any number of sessions can be created free of charge as a guest or registered user.
Only the sessions of registered users remain permanently.
Only 180 days after the last use of a session it will be deleted automatically.
</p>
- <p>
+ <p tabindex="0">
»frag.jetzt« was optimized for accessibility with a screen reader and exclusive keyboard control.
The user interface meets the requirements of WCAG 2.1 AA.
Appropriate display options (»themes«) are available for beamer presentations in large lecture halls and for the
visually impaired.
In particular, the font size of the questions can be scaled at will.
</p>
- <p>
+ <p tabindex="0">
»frag.jetzt« can be used completely anonymously when registering as a guest.
The accounts of registered users are stored and managed in accordance with the data protection regulations of the
DSGVO.
@@ -68,9 +68,9 @@
»frag.jetzt« is operated as free »Software as a Service« by TransMIT GmbH, see imprint.
</p>
- <h3>Mobile phone use in the lecture hall</h3>
+ <h3 tabindex="0">Mobile phone use in the lecture hall</h3>
- <p>
+ <p tabindex="0">
The use of the smartphone during the lecture naturally entails a high risk of distraction.
We have learned from our many years of experience with audience response systems in lecture halls,
see our <a href="https://arsnova.thm.de/blog/en/homepage/" target="_blank">ARSnova Project</a>,
@@ -79,107 +79,105 @@
<ol>
<li>
- Mobile phone use during the lecture:
- An assistant moderates the question board on site or from a distance.
- 10 minutes before the end of the lecture, the teacher answers 2-3 top questions on the beamer.
+ <p tabindex="0">Mobile phone use during the lecture:</p>
+ <p tabindex="0">An assistant moderates the question board on site or from a distance.
+ 10 minutes before the end of the lecture, the teacher answers 2-3 top questions on the beamer.</p>
</li>
<li>
- Mobile phone use only during the break:
- The teacher announces the session code during the break and moderates the questions himself.
- After the break she answers 2-3 top questions.
+ <p tabindex="0">Mobile phone use only during the break:</p>
+ <p tabindex="0">The teacher announces the session code during the break and moderates the questions himself.
+ After the break she answers 2-3 top questions.</p>
</li>
<li>
- No mobile phone use during the lecture:
- The teacher creates a new session at the end of each lecture.
+ <p tabindex="0">No mobile phone use during the lecture:</p>
+ <p tabindex="0">The teacher creates a new session at the end of each lecture.
Students can ask and rate questions at home.
The question board is moderated by an assistant or the teacher himself.
- In the first 10 minutes of the next lecture the teacher answers 2-3 top questions.
+ In the first 10 minutes of the next lecture the teacher answers 2-3 top questions.</p>
</li>
<li>
- No mobile phone use during the lecture:
- The teacher creates a session for the entire duration of the course.
+ <p tabindex="0">No mobile phone use during the lecture:</p>
+ <p tabindex="0">The teacher creates a session for the entire duration of the course.
An assistant moderates the question board during the semester.
The teacher marks the relevant questions and deletes all others.
- The question list thus serves to reflect on the lecture contents and to prepare for the exam.
+ The question list thus serves to reflect on the lecture contents and to prepare for the exam.</p>
</li>
</ol>
- <h2>Icons and buttons</h2>
+ <h2 tabindex="0">Icons and buttons</h2>
- <p>Teacher's view of the question board:</p>
+ <p tabindex="0">Teacher's view of the question board:</p>
- <img src="https://arsnova.thm.de/blog/wp-content/uploads/2019/12/Fragen-Board.png"
+ <img tabindex="0" src="https://arsnova.thm.de/blog/wp-content/uploads/2019/12/Fragen-Board.png"
alt="Screenshot of a question from the teacher's point of view" width="90%">
- <p>Header of the question board</p>
+ <p tabindex="0">Header of the question board</p>
<ol>
- <li>Back to previous page</li>
- <li>Full view with scaling options</li>
- <li>Session is moderated</li>
- <li>QR code of the session</li>
- <li>Account with further options</li>
+ <li tabindex="0">Back to previous page</li>
+ <li tabindex="0">Full view with scaling options</li>
+ <li tabindex="0">Session is moderated</li>
+ <li tabindex="0">QR code of the session</li>
+ <li tabindex="0">Account with further options</li>
</ol>
- <p>Toolbar of the question board</p>
+ <p tabindex="0">Toolbar of the question board</p>
<ol>
- <li>Number of questions received</li>
- <li>Browse question board</li>
- <li>Sort questions</li>
- <li>Filter questions</li>
- <li>Stop question stream</li>
- <li>Ask a question</li>
+ <li tabindex="0">Number of questions received</li>
+ <li tabindex="0">Browse question board</li>
+ <li tabindex="0">Sort questions</li>
+ <li tabindex="0">Filter questions</li>
+ <li tabindex="0">Stop question stream</li>
+ <li tabindex="0">Ask a question</li>
</ol>
- <p>Toolbar of a question card</p>
+ <p tabindex="0">Toolbar of a question card</p>
<ol>
- <li>Time stamp of question</li>
- <li>Discuss question</li>
- <li>Comment question</li>
- <li>Affirm question</li>
- <li>Deny question</li>
- <li>Give bonus</li>
- <li>Delete question</li>
- <li>Banish question</li>
+ <li tabindex="0">Time stamp of question</li>
+ <li tabindex="0">Discuss question</li>
+ <li tabindex="0">Comment question</li>
+ <li tabindex="0">Affirm question</li>
+ <li tabindex="0">Deny question</li>
+ <li tabindex="0">Give bonus</li>
+ <li tabindex="0">Delete question</li>
+ <li tabindex="0">Banish question</li>
</ol>
- <h2>Session management</h2>
+ <h2 tabindex="0">Session management</h2>
- <p>Teacher's view of the session:</p>
+ <p tabindex="0">Teacher's view of the session:</p>
- <img src="https://arsnova.thm.de/blog/wp-content/uploads/2019/12/Settings-505x1024.png"
+ <img tabindex="0" src="https://arsnova.thm.de/blog/wp-content/uploads/2019/12/Settings-505x1024.png"
alt="Screenshot of session management options" width="90%">
- <p>Click on the gearwheel icon to open the management options:</p>
+ <p tabindex="0">Click on the gearwheel icon to open the management options:</p>
<ol>
- <li>Session: Here you can change the name of the session and add a description.
+ <li tabindex="0">Session: Here you can change the name of the session and add a description.
You can use <a href="https://en.wikipedia.org/wiki/Markdown" target="_blank">Markdown</a> for text formatting.
This is also the place to delete the session with all questions and ratings.
</li>
- <li>Questions: You can set a threshold for publishing a question,
- that is, the value at which a question is displayed. The value is between -100 and 0.
-
- You also specify whether the questions are to be moderated and whether they are to be displayed before moderation.
+ <li tabindex="0"><p>Questions:</p> <p>You can set a threshold for publishing a question,
+ that is, the value at which a question is displayed. The value is between -100 and 0.</p>
+ <p>You also specify whether the questions are to be moderated and whether they are to be displayed before moderation.
This is also the place to export all questions with their ratings to an Excel spreadsheet.
-
- Furthermore you can delete all questions to use the session again.
+ Furthermore you can delete all questions to use the session again.</p>
</li>
- <li>Moderators: You can only accept registered users as moderators.
- For this you need the email address with which he or she registered.
+ <li tabindex="0"><p>Moderators:</p> <p>You can only accept registered users as moderators.
+ For this you need the email address with which he or she registered.</p>
</li>
- <li>Tokens for bonus points: If you annotate a question with a star,
+ <li tabindex="0"><p>Tokens for bonus points:</p> <p>If you annotate a question with a star,
an 8-digit number code (»token«) is generated for the question and listed here.
- The author of the question will find the token in his account and can use it to redeem the bonus.
+ The author of the question will find the token in his account and can use it to redeem the bonus.</p>
</li>
- <li>Tags: Here you can define session-specific categories that your listeners can use to tag their questions.
+ <li tabindex="0"><p>Tags:</p> <p>Here you can define session-specific categories that your listeners can use to tag their questions.
The tag will then appear next to each question.
- With a click on it, all questions will be filtered with this tag.
+ With a click on it, all questions will be filtered with this tag.</p>
</li>
</ol>
- <h2>Role concept of »frag.jetzt«</h2>
+ <h2 tabindex="0">Role concept of »frag.jetzt«</h2>
+
-</div>
<div class="video">
<div class="videoWrapper">
<iframe tabindex="0"
@@ -247,9 +245,9 @@
Imprint.</p>
</div>
-<h2>Questions to the developers</h2>
+<h2 tabindex="0">Questions to the developers</h2>
-<p>
+<p tabindex="0">
Use session key 11 22 33 44 for questions to the developers.
If we can answer yes or no to your questions, you will receive a prompt answer in the app.
Other qestions will be answered in the <a href="https://arsnova.thm.de/blog/frag-jetzt/" target="_blank">ARSnova