CSS improvements and small fixes
This commit is contained in:
parent
88c82eec7e
commit
46a8b2244f
@ -1,78 +1,4 @@
|
||||
{
|
||||
"Block 4":{
|
||||
"type": "TaskTemplate",
|
||||
"tempalte": "standard_template.html",
|
||||
"number_of_pages":"3",
|
||||
"stimuli":{
|
||||
"type":"single_video",
|
||||
"order": "random",
|
||||
"list":{
|
||||
"video_1":"https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70",
|
||||
"video_2":"https://www.youtube-nocookie.com/embed/EL76Ok4r0aQ?si=hqUm8eUUfX39NN4L",
|
||||
"video_3":"https://www.youtube-nocookie.com/embed/XTMIomsXxKM?si=r2zB6OKERH6Jdpi6"
|
||||
},
|
||||
"configuration":{
|
||||
"embed":"yt"
|
||||
}
|
||||
},
|
||||
"questions":{
|
||||
"question1":{
|
||||
"type": "likert",
|
||||
"name": "likertscale",
|
||||
"text": "How would you rate this video?",
|
||||
"required": "true",
|
||||
"points":{
|
||||
"p1":{
|
||||
"value":"1",
|
||||
"text":"I dont like it at all"
|
||||
},
|
||||
"p2":{
|
||||
"value":"2",
|
||||
"text":"I dont like it"
|
||||
},
|
||||
"p3":{
|
||||
"value":"3",
|
||||
"text":"I am indifferent"
|
||||
},
|
||||
"p4":{
|
||||
"value":"4",
|
||||
"text":"I like it"
|
||||
},
|
||||
"p5":{
|
||||
"value":"5",
|
||||
"text":"I like it a lot"
|
||||
}
|
||||
}
|
||||
},
|
||||
"question2":{
|
||||
"type": "textinput",
|
||||
"name": "text_feedback",
|
||||
"text": "Here you can give us Feedback",
|
||||
"required": "false",
|
||||
"size": "250"
|
||||
},
|
||||
"question3":{
|
||||
"type": "videoinput",
|
||||
"text": "Here you can give us Feedback as video",
|
||||
"name": "video_feedback",
|
||||
"required": "false"
|
||||
}
|
||||
},
|
||||
"database_table" :{
|
||||
"table_name": "default_block3_test",
|
||||
"fields": {
|
||||
"likertscale":{
|
||||
"type": "integer",
|
||||
"nullable": "false"
|
||||
},
|
||||
"text_feedback":{
|
||||
"type": "string",
|
||||
"size": "250",
|
||||
"nullable": "true"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"Block 3":{
|
||||
"type": "TaskTemplate",
|
||||
"tempalte": "standard_template.html",
|
||||
@ -209,6 +135,80 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"Block 4":{
|
||||
"type": "TaskTemplate",
|
||||
"tempalte": "standard_template.html",
|
||||
"number_of_pages":"3",
|
||||
"stimuli":{
|
||||
"type":"single_video",
|
||||
"order": "random",
|
||||
"list":{
|
||||
"video_1":"https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70",
|
||||
"video_2":"https://www.youtube-nocookie.com/embed/EL76Ok4r0aQ?si=hqUm8eUUfX39NN4L",
|
||||
"video_3":"https://www.youtube-nocookie.com/embed/XTMIomsXxKM?si=r2zB6OKERH6Jdpi6"
|
||||
},
|
||||
"configuration":{
|
||||
"embed":"yt"
|
||||
}
|
||||
},
|
||||
"questions":{
|
||||
"question1":{
|
||||
"type": "likert",
|
||||
"name": "likertscale",
|
||||
"text": "How would you rate this video?",
|
||||
"required": "true",
|
||||
"points":{
|
||||
"p1":{
|
||||
"value":"1",
|
||||
"text":"I dont like it at all"
|
||||
},
|
||||
"p2":{
|
||||
"value":"2",
|
||||
"text":"I dont like it"
|
||||
},
|
||||
"p3":{
|
||||
"value":"3",
|
||||
"text":"I am indifferent"
|
||||
},
|
||||
"p4":{
|
||||
"value":"4",
|
||||
"text":"I like it"
|
||||
},
|
||||
"p5":{
|
||||
"value":"5",
|
||||
"text":"I like it a lot"
|
||||
}
|
||||
}
|
||||
},
|
||||
"question2":{
|
||||
"type": "textinput",
|
||||
"name": "text_feedback",
|
||||
"text": "Here you can give us Feedback",
|
||||
"required": "false",
|
||||
"size": "250"
|
||||
},
|
||||
"question3":{
|
||||
"type": "videoinput",
|
||||
"text": "Here you can give us Feedback as video",
|
||||
"name": "video_feedback",
|
||||
"required": "false"
|
||||
}
|
||||
},
|
||||
"database_table" :{
|
||||
"table_name": "default_block3_test",
|
||||
"fields": {
|
||||
"likertscale":{
|
||||
"type": "integer",
|
||||
"nullable": "false"
|
||||
},
|
||||
"text_feedback":{
|
||||
"type": "string",
|
||||
"size": "250",
|
||||
"nullable": "true"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"Block_1":{
|
||||
"type": "SinglePage",
|
||||
"template": "test_page0.html"
|
||||
|
||||
247
slaeforms/static/oldstyle.css
Normal file
247
slaeforms/static/oldstyle.css
Normal file
@ -0,0 +1,247 @@
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100hv;
|
||||
margin: 0;
|
||||
/*align-items: center; this will make the content a square, with edges up and bottom*/
|
||||
background-color: #a4b5ff;
|
||||
color: #000000;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.centercontent {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.container {
|
||||
height: 100%;
|
||||
|
||||
width: 80%; /* You can adjust this width as needed */
|
||||
max-width: 1200px; /* Maximum width to keep it from getting too wide on large screens */
|
||||
padding: 20px;
|
||||
background-color: #7b8cdb; /* Just for visual differentiation */
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Form */
|
||||
form {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Helper */
|
||||
.spacer {
|
||||
clear: both;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* buttons */
|
||||
.buttondisable {
|
||||
filter: invert(65%);
|
||||
}
|
||||
|
||||
#submitbutton {
|
||||
cursor: pointer;
|
||||
padding: 10px 20px; /* Increased padding for a bigger button */
|
||||
font-size: 20px; /* Increased font size */
|
||||
border: none; /* Removes default border */
|
||||
border-radius: 8px; /* Optional: rounds the corners of the button */
|
||||
}
|
||||
#submitbutton:hover {
|
||||
background-color: #0056b3; /* Darker shade for hover effect */
|
||||
}
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px; /* Adjust as needed for spacing */
|
||||
}
|
||||
|
||||
.centertext {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2,h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.textarea-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.textarea-label{
|
||||
align-self: flex-start; /* Aligns the label to the start of the container */
|
||||
}
|
||||
|
||||
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.aspect-ratio-16-9 {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
/* Video recording controls */
|
||||
.videocontrols {
|
||||
width: 100px; /* Set a specific width for the buttons */
|
||||
height: 70px; /* Set a specific height for the buttons */
|
||||
background-color: #cae4ff;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
margin: 0 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
display: inline-flex; /* Display button contents as a flexbox */
|
||||
justify-content: center; /* Center contents horizontally */
|
||||
align-items: center; /* Center contents vertically */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.videocontrols img {
|
||||
max-width: 65%;
|
||||
max-height: 65%;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
width: auto; /* Make the image fill its container */
|
||||
height: auto; /* Make the image fill its container */
|
||||
display: block; /* Remove any extra space around the image */
|
||||
}
|
||||
|
||||
.columncontainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.columnleft {
|
||||
width: 100%;
|
||||
border: 3px solid black;
|
||||
}
|
||||
.columnright {
|
||||
width: 100%;
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
/* Video recording iframe */
|
||||
|
||||
iframe {
|
||||
display:block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 aspect ratio */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.video-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Likert stuff */
|
||||
.likert {
|
||||
--likert-rows: 5;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
display: inline-grid;
|
||||
max-width: 900px;
|
||||
grid-auto-rows: 1fr;
|
||||
gap: 1em;
|
||||
grid-template-columns: repeat(var(--likert-rows), minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.likert {
|
||||
grid-template-columns: minmax(0, 400px);
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
input, label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.likert input {
|
||||
max-width: 250px;
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.likercontainer{
|
||||
margin: 30px auto;
|
||||
text-align: center;
|
||||
}
|
||||
.likert span {
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
background: #dcdcdc;
|
||||
transition: background .2s ease-in-out;
|
||||
}
|
||||
|
||||
.likert input:checked + span {
|
||||
outline: black auto 1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.likert input:focus + span {
|
||||
outline: auto 1px; /*-webkit-focus-ring-color*/
|
||||
}
|
||||
|
||||
.likert span:hover {
|
||||
background: #f1f1f1;
|
||||
outline: lightgrey auto 0.5px;
|
||||
}
|
||||
|
||||
|
||||
/* Table display stuff */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
table-layout: auto; /* Allows columns to adjust to their content */
|
||||
width: auto; /* Adjusts the table width to the content */
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
word-wrap: break-word; /* Ensures content wraps and doesn't overflow */
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
@ -1,81 +1,129 @@
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
/*align-items: center; this will make the content a square, with edges up and bottom*/
|
||||
background-color: #a4b5ff;
|
||||
color: #000000;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.centercontent {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.container {
|
||||
height: 100%;
|
||||
|
||||
width: 80%; /* You can adjust this width as needed */
|
||||
margin: 0 auto;
|
||||
/* height: 100vh;*/
|
||||
width: 60vw; /* You can adjust this width as needed */
|
||||
max-width: 1200px; /* Maximum width to keep it from getting too wide on large screens */
|
||||
padding: 20px;
|
||||
background-color: #7b8cdb; /* Just for visual differentiation */
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.spacer {
|
||||
clear: both;
|
||||
box-sizing: border-box;
|
||||
.textblock {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
form {
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
|
||||
.dsgvoform {
|
||||
text-align: right;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 60%;
|
||||
min-height: 2em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button-container input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 30px; /* Adjust as needed for spacing */
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
.button-container {
|
||||
margin: 0 auto;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
.buttondisable {
|
||||
filter: invert(65%);
|
||||
}
|
||||
|
||||
#submitbutton {
|
||||
cursor: pointer;
|
||||
padding: 10px 20px; /* Increased padding for a bigger button */
|
||||
font-size: 20px; /* Increased font size */
|
||||
padding: 12px 24px; /* Increased padding for a bigger button */
|
||||
font-size: 25px; /* Increased font size */
|
||||
border: none; /* Removes default border */
|
||||
border-radius: 8px; /* Optional: rounds the corners of the button */
|
||||
width: auto;
|
||||
}
|
||||
#submitbutton:hover {
|
||||
background-color: #0056b3; /* Darker shade for hover effect */
|
||||
}
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px; /* Adjust as needed for spacing */
|
||||
}
|
||||
|
||||
|
||||
.textarea-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
width: 60%;
|
||||
}
|
||||
.textarea-container textarea{
|
||||
width: 100%;
|
||||
margin: 1.5rem auto;
|
||||
}
|
||||
|
||||
.textarea-label{
|
||||
align-self: flex-start; /* Aligns the label to the start of the container */
|
||||
}
|
||||
|
||||
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
/* Helper */
|
||||
.spacer {
|
||||
clear: both;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.aspect-ratio-16-9 {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
|
||||
.centertext {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2,h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.compressWidth {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
/* Video recording controls */
|
||||
.videocontrols {
|
||||
width: 100px; /* Set a specific width for the buttons */
|
||||
height: 70px; /* Set a specific height for the buttons */
|
||||
@ -116,18 +164,16 @@ video {
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
iframe {
|
||||
display:block;
|
||||
margin: auto;
|
||||
/* Video recording video and youtube iframe */
|
||||
video { /* Video should not be bigger than 100% */
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 aspect ratio */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
background: #000;
|
||||
iframe { /* center the iframe, mostly unnecessary */
|
||||
display:block;
|
||||
}
|
||||
|
||||
.video-container iframe {
|
||||
@ -138,23 +184,15 @@ iframe {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.video-container {
|
||||
background: #000;
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.centertext {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2,h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* Likert stuff */
|
||||
.likert {
|
||||
--likert-rows: 5;
|
||||
margin: auto;
|
||||
@ -162,22 +200,10 @@ h2,h3 {
|
||||
display: inline-grid;
|
||||
max-width: 900px;
|
||||
grid-auto-rows: 1fr;
|
||||
gap: 1em;
|
||||
gap: 2em;
|
||||
grid-template-columns: repeat(var(--likert-rows), minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.likert {
|
||||
grid-template-columns: minmax(0, 400px);
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
input, label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.likert input {
|
||||
max-width: 250px;
|
||||
position: fixed;
|
||||
@ -185,6 +211,10 @@ input, label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.likert label {
|
||||
aspect-ratio: 1.5 / 1;
|
||||
}
|
||||
|
||||
.likercontainer{
|
||||
margin: 30px auto;
|
||||
text-align: center;
|
||||
@ -217,6 +247,15 @@ input, label {
|
||||
outline: lightgrey auto 0.5px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.likert {
|
||||
grid-template-columns: minmax(0, 400px);
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Table display stuff */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
|
||||
@ -8,8 +8,7 @@
|
||||
<h3>{{title}}</h3>
|
||||
{% endif %}
|
||||
<div class="video-container">
|
||||
<iframe width={{width}} height={{height}} class="center" src="{{ video_url }}" title="YouTube video player"
|
||||
frameborder="0"
|
||||
<iframe class="center" src="{{ video_url }}" title="YouTube video player" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
@ -27,13 +26,13 @@ required
|
||||
|
||||
{% macro inputconfig(question) -%}
|
||||
{% if ("min" in question) %}
|
||||
min={{question["min"]}}
|
||||
min={{question["min"]}}
|
||||
{% endif %}
|
||||
{% if ("max" in question) %}
|
||||
max={{question["max"]}}
|
||||
max={{question["max"]}}
|
||||
{% endif %}
|
||||
{% if ("step" in question) %}
|
||||
step={{question["step"]}}
|
||||
step={{question["step"]}}
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
@ -49,17 +48,15 @@ step={{question["step"]}}
|
||||
<title>Testform</title>
|
||||
<link rel=" shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
<script>const ICON_PATHS = {
|
||||
cameraofficon: "{{ url_for('static', filename='icons/camera-off-icon.png') }}",
|
||||
cameraicon: "{{ url_for('static', filename='icons/camera-icon.png') }}",
|
||||
stopicon: "{{ url_for('static', filename='icons/stop-icon.png') }}",
|
||||
recordicon: "{{ url_for('static', filename='icons/record-icon.png') }}"
|
||||
};</script>
|
||||
cameraofficon: "{{ url_for('static', filename='icons/camera-off-icon.png') }}",
|
||||
cameraicon: "{{ url_for('static', filename='icons/camera-icon.png') }}",
|
||||
stopicon: "{{ url_for('static', filename='icons/stop-icon.png') }}",
|
||||
recordicon: "{{ url_for('static', filename='icons/record-icon.png') }}"
|
||||
};</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="centercontent">
|
||||
<div class="container">
|
||||
<h2>Stimulus part</h2>
|
||||
{% if (stimulus_type == "single_video") %}
|
||||
{{ single_video(**stimulus_configuration) }}
|
||||
{% elif (stimulus_type == "empty") %}
|
||||
@ -68,18 +65,16 @@ step={{question["step"]}}
|
||||
<p>Error: Block {{ stimulus["type"] }} could not be loaded!</p>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
<h2>Questions</h2>
|
||||
<form id="question_form" action="http://localhost:5000/send_json" method="post">
|
||||
<form class="formlayout" id="question_form" action="http://localhost:5000/send_json" method="post">
|
||||
{% for question in questions %}
|
||||
{% if (questions[question]["type"] == "likert") %}
|
||||
<div class="likercontainer">
|
||||
<h3>{{ questions[question]['text']}}</h3>
|
||||
<div class="likert">
|
||||
{{ questions[question]['text']}}
|
||||
{% for point in questions[question]["points"] %}
|
||||
<label>
|
||||
<input name="{{ questions[question]['name']}}" type="radio" id="{{ questions[question]['name'] }}"
|
||||
<input name="{{ questions[question]['name']}}" type="radio"
|
||||
id="{{ questions[question]['name'] }}"
|
||||
value="{{ questions[question]['points'][point]['value'] }}"
|
||||
{{required(questions[question])}} /><span>{{ questions[question]['points'][point]['text']
|
||||
}}</span>
|
||||
@ -91,59 +86,69 @@ step={{question["step"]}}
|
||||
{% elif (questions[question]["type"] == "textinput") %}
|
||||
<div class="textarea-container">
|
||||
<label class="textarea-label">
|
||||
{{ questions[question]['text']}}
|
||||
{{ questions[question]['text']}}
|
||||
<textarea id="{{ questions[question]['name'] }}" name="{{ questions[question]['name'] }}" rows="6"
|
||||
cols="60" maxlength="{{ questions[question]['size'] }}"
|
||||
{{required(questions[question])}}></textarea>
|
||||
cols="60" maxlength="{{ questions[question]['size'] }}"
|
||||
{{required(questions[question])}}></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{% elif (questions[question]["type"] == "dateinput") %}
|
||||
<label>
|
||||
{{ questions[question]['text']}}
|
||||
<input type="date" name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
|
||||
</label>
|
||||
|
||||
<div class="compressWidth">
|
||||
<label>
|
||||
{{ questions[question]['text']}}<input type="date" name="{{ questions[question]['name']}}"
|
||||
id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
|
||||
</label>
|
||||
</div>
|
||||
{% elif (questions[question]["type"] == "numberinput") %}
|
||||
<label>
|
||||
{{ questions[question]['text']}}
|
||||
<input type="number" name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}" {{inputconfig(questions[question])}} {{required(questions[question])}}>
|
||||
</label>
|
||||
<div class="compressWidth">
|
||||
<label>
|
||||
{{ questions[question]['text']}}<input type="number" name="{{ questions[question]['name']}}"
|
||||
id="{{ questions[question]['name'] }}" {{inputconfig(questions[question])}}
|
||||
{{required(questions[question])}}>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{% elif (questions[question]["type"] == "emailinput") %}
|
||||
<label>
|
||||
{{ questions[question]['text']}}
|
||||
<input type="email" name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
|
||||
</label>
|
||||
<div class="compressWidth">
|
||||
<label>
|
||||
{{ questions[question]['text']}}<input type="email" name="{{ questions[question]['name']}}"
|
||||
id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{% elif (questions[question]["type"] == "dropdowninput") %}
|
||||
<label>
|
||||
{{ questions[question]['text']}}
|
||||
<select name="{{ questions[question]['name']}}" {{required(questions[question])}}>
|
||||
<option value="" disabled selected>{{ questions[question]['defaulttext']}}</option>
|
||||
{% for point in questions[question]["points"] %}
|
||||
<div class="compressWidth">
|
||||
<label>
|
||||
{{ questions[question]['text']}}<select name="{{ questions[question]['name']}}"
|
||||
{{required(questions[question])}}>
|
||||
<option value="" disabled selected>{{ questions[question]['defaulttext']}}</option>
|
||||
{% for point in questions[question]["points"] %}
|
||||
<option name="{{ point }}" id="{{ point }}"
|
||||
value="{{ questions[question]['points'][point]['value'] }}"
|
||||
{{required(questions[question])}}><span>{{ questions[question]['points'][point]['text']
|
||||
}}</span></option>
|
||||
}}</span></option>
|
||||
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{% elif (questions[question]["type"] == "videoinput") %}
|
||||
<div class="spacer" aria-hidden="true" style="height:30px"></div>
|
||||
<h2>Gib Feedback als Video</h2>
|
||||
<h3>{{ questions[question]['text']}}</h3>
|
||||
|
||||
<div class="centertext">
|
||||
{{ questions[question]['text']}}
|
||||
<button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
|
||||
<img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}"
|
||||
alt="Camera Icon">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div class="spacer" aria-hidden="true" style="height:30px"></div>
|
||||
<div class="centertext">
|
||||
|
||||
|
||||
<div class="spacer" aria-hidden="true" style="height:30px"></div>
|
||||
|
||||
|
||||
<button type="button" class="videocontrols" id="buttonRecord" style="display:none"
|
||||
onclick="recordButton()">
|
||||
<img id="buttonRecordIcon" src="{{ url_for('static', filename='icons/record-icon.png')}}"
|
||||
@ -155,27 +160,26 @@ step={{question["step"]}}
|
||||
<img id="buttonDeleteIcon" src="{{ url_for('static', filename='icons/trash-icon.png')}}"
|
||||
alt="Delete Icon" class="buttondisable">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="spacer" aria-hidden="true" style="height:15px"></div>
|
||||
<div id="videoContainer" class="centertext, aspect-ratio-16-9" style="display:none">
|
||||
<div id="videoContainer" style="display:none">
|
||||
<video autoplay muted playsinline id="videoDisplay"></video>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="{{ url_for('static', filename='videoscript.js')}}">
|
||||
|
||||
|
||||
</script>
|
||||
{% else %}
|
||||
<p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="button-container">
|
||||
<p><input id="submitbutton" type="submit" value="submit" ; /></p>
|
||||
<input id="submitbutton" type="submit" value="submit" />
|
||||
<!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> -->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -8,7 +8,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="centercontent">
|
||||
<div class="container">
|
||||
<h2>Hello! Thank you for participating in our study!</h2>
|
||||
<form action="http://localhost:5000/start" method="post">
|
||||
@ -19,7 +18,6 @@
|
||||
<p><input id="submitbutton" type = "submit" value = "submit" /></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -9,7 +9,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="centercontent"></div>
|
||||
<div class="container">
|
||||
<p>This is just a test page for the single page option of the json configuration, but without something to submit</p>
|
||||
<form action="http://localhost:5000/send_json" method="post">
|
||||
@ -17,6 +16,5 @@
|
||||
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -9,7 +9,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="centercontent">
|
||||
<div class="container">
|
||||
<p>This is just a test page for the single page option of the json configuration</p>
|
||||
<form action="http://localhost:5000/send_json" method="post">
|
||||
@ -22,6 +21,5 @@
|
||||
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,6 +1,5 @@
|
||||
<!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')}}-->
|
||||
@ -8,18 +7,26 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="centercontent">
|
||||
<div class="container">
|
||||
<h2>Hello! Thank you for participating in our study!</h2>
|
||||
<form action="http://localhost:5000/teststart" method="post">
|
||||
|
||||
<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/teststart" 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</a>
|
||||
</label>
|
||||
|
||||
<p><input id="submitbutton" type = "submit" value = "submit" /></p>
|
||||
<div class="button-container">
|
||||
<input id="submitbutton" type = "submit" value = "submit" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user