Jan/slaeforms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Popup video works in test

Browse Source
This commit is contained in:
Jan Dickmann 2024-06-26 11:32:16 +02:00
parent 85fa8b4526
commit a4fc083305
3 changed files with 82 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
slaeforms/app.py
View File

@ -131,6 +131,14 @@ except SQLAlchemyError as e:
#------------------------------------------------------------------------------ #------------------------------------------------------------------------------
#actual page logic with start, form and send #actual page logic with start, form and send
@app.route("/popuptest", methods=["GET"])
def popuptest():
return render_template(
"popuptest.html"
)
@app.route("/start", methods=["GET", "POST"]) @app.route("/start", methods=["GET", "POST"])
def startpage(): def startpage():
session.permanent = False session.permanent = False

12
slaeforms/static/styles.css
View File

@ -8,6 +8,18 @@ body {
font-size: 16px; font-size: 16px;
} }
::backdrop {
background-color: grey;
opacity: 1;
}
dialog {
width: 66%;
}
.container { .container {
margin: 0 auto; margin: 0 auto;
/* height: 100vh;*/ /* height: 100vh;*/

62
slaeforms/templates/popuptest.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>DGS Avatar Study</title>
</head>
<body>
<div class="container">
<h2>Hello! Thank you for participating in our study!</h2>
<dialog>
<button autofocus><img id="buttonClose" src="{{ url_for('static', filename='icons/x-icon.png')}}"
alt="Delete Icon" class="buttonclose"></button>
<div class="iframe-container">
<iframe class="center" src="https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<p>Here is the text with the content of the explanation video.
Here participants can read the full text that is beeing shown in the video above in sign language.
From Feedback with a deaf sign language expert, we concluded that giving the whole text as additional resource
would be a good idea, since this would help if a participants looses track of the vide, can not understand the DGS dialect,
or just wants to read, because maybe that is what they prefer. This is especially relevant is the participant can not see very well.</p>
</dialog>
<button>Show the dialog</button>
<div class="textblock">
<p>This is a placeholder EULA and Terms and Condition Text, this should obviously be replaced with some real Text later.
For now, be aware that this is a prototype for a sign language avatar study.
The Data that you input in this form, will be saved on our servers, but in an annonimized ways, so we can not infer who sent this data.
The Video recordings pose a special case. Any videos that are recorded, will be reviewed by sign language experts in our team,
the meaning will be transcribed in text form, then the video will be deleted.
If you have further questions, please send an email to testemail@notarealemail.deee
</p>
</div>
<form class="dsgvoform" action="http://localhost:5000/start" method="post">
<label for="terms-and-conditions">
<input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the +terms and conditions
</label>
<div class="button-container">
<input id="submitbutton" type = "submit" value = "submit" />
</div>
</form>
</div>
<script>
const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");
// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
dialog.showModal();
});
// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
dialog.close();
});
</script>
</body>
</html>