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":{
|
"Block 3":{
|
||||||
"type": "TaskTemplate",
|
"type": "TaskTemplate",
|
||||||
"tempalte": "standard_template.html",
|
"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":{
|
"Block_1":{
|
||||||
"type": "SinglePage",
|
"type": "SinglePage",
|
||||||
"template": "test_page0.html"
|
"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 {
|
body {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/*align-items: center; this will make the content a square, with edges up and bottom*/
|
|
||||||
background-color: #a4b5ff;
|
background-color: #a4b5ff;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
font-family: Tahoma;
|
font-family: Tahoma;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.centercontent {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.container {
|
.container {
|
||||||
height: 100%;
|
margin: 0 auto;
|
||||||
|
/* height: 100vh;*/
|
||||||
width: 80%; /* You can adjust this width as needed */
|
width: 60vw; /* You can adjust this width as needed */
|
||||||
max-width: 1200px; /* Maximum width to keep it from getting too wide on large screens */
|
max-width: 1200px; /* Maximum width to keep it from getting too wide on large screens */
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: #7b8cdb; /* Just for visual differentiation */
|
background-color: #7b8cdb; /* Just for visual differentiation */
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.textblock {
|
||||||
|
width: 60%;
|
||||||
.spacer {
|
display: flex;
|
||||||
clear: both;
|
margin: auto;
|
||||||
box-sizing: border-box;
|
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 {
|
.buttondisable {
|
||||||
filter: invert(65%);
|
filter: invert(65%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#submitbutton {
|
#submitbutton {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 10px 20px; /* Increased padding for a bigger button */
|
padding: 12px 24px; /* Increased padding for a bigger button */
|
||||||
font-size: 20px; /* Increased font size */
|
font-size: 25px; /* Increased font size */
|
||||||
border: none; /* Removes default border */
|
border: none; /* Removes default border */
|
||||||
border-radius: 8px; /* Optional: rounds the corners of the button */
|
border-radius: 8px; /* Optional: rounds the corners of the button */
|
||||||
|
width: auto;
|
||||||
}
|
}
|
||||||
#submitbutton:hover {
|
#submitbutton:hover {
|
||||||
background-color: #0056b3; /* Darker shade for hover effect */
|
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 {
|
.textarea-container {
|
||||||
display: flex;
|
margin: auto;
|
||||||
flex-direction: column;
|
width: 60%;
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
.textarea-container textarea{
|
||||||
|
width: 100%;
|
||||||
|
margin: 1.5rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
.textarea-label{
|
.textarea-label{
|
||||||
align-self: flex-start; /* Aligns the label to the start of the container */
|
align-self: flex-start; /* Aligns the label to the start of the container */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Helper */
|
||||||
video {
|
.spacer {
|
||||||
max-width: 100%;
|
clear: both;
|
||||||
max-height: 100%;
|
box-sizing: border-box;
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
}
|
}
|
||||||
.aspect-ratio-16-9 {
|
|
||||||
width: 100%;
|
.centertext {
|
||||||
aspect-ratio: 16 / 9;
|
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 {
|
.videocontrols {
|
||||||
width: 100px; /* Set a specific width for the buttons */
|
width: 100px; /* Set a specific width for the buttons */
|
||||||
height: 70px; /* Set a specific height for the buttons */
|
height: 70px; /* Set a specific height for the buttons */
|
||||||
@ -116,18 +164,16 @@ video {
|
|||||||
border: 3px solid black;
|
border: 3px solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
iframe {
|
/* Video recording video and youtube iframe */
|
||||||
display:block;
|
video { /* Video should not be bigger than 100% */
|
||||||
margin: auto;
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-container {
|
iframe { /* center the iframe, mostly unnecessary */
|
||||||
position: relative;
|
display:block;
|
||||||
padding-bottom: 56.25%; /* 16:9 aspect ratio */
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
max-width: 100%;
|
|
||||||
background: #000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-container iframe {
|
.video-container iframe {
|
||||||
@ -138,23 +184,15 @@ iframe {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
.video-container {
|
||||||
text-align: center;
|
background: #000;
|
||||||
display: flex;
|
position: relative;
|
||||||
flex-direction: column;
|
padding-bottom: 56.25%; /* 16:9 */
|
||||||
align-items: center;
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.centertext {
|
/* Likert stuff */
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2,h3 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.likert {
|
.likert {
|
||||||
--likert-rows: 5;
|
--likert-rows: 5;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -162,22 +200,10 @@ h2,h3 {
|
|||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
grid-auto-rows: 1fr;
|
grid-auto-rows: 1fr;
|
||||||
gap: 1em;
|
gap: 2em;
|
||||||
grid-template-columns: repeat(var(--likert-rows), minmax(0, 1fr));
|
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 {
|
.likert input {
|
||||||
max-width: 250px;
|
max-width: 250px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -185,6 +211,10 @@ input, label {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.likert label {
|
||||||
|
aspect-ratio: 1.5 / 1;
|
||||||
|
}
|
||||||
|
|
||||||
.likercontainer{
|
.likercontainer{
|
||||||
margin: 30px auto;
|
margin: 30px auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -217,6 +247,15 @@ input, label {
|
|||||||
outline: lightgrey auto 0.5px;
|
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 {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
|
|||||||
@ -8,8 +8,7 @@
|
|||||||
<h3>{{title}}</h3>
|
<h3>{{title}}</h3>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="video-container">
|
<div class="video-container">
|
||||||
<iframe width={{width}} height={{height}} class="center" src="{{ video_url }}" title="YouTube video player"
|
<iframe class="center" src="{{ video_url }}" title="YouTube video player" frameborder="0"
|
||||||
frameborder="0"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
allowfullscreen></iframe>
|
allowfullscreen></iframe>
|
||||||
</div>
|
</div>
|
||||||
@ -27,13 +26,13 @@ required
|
|||||||
|
|
||||||
{% macro inputconfig(question) -%}
|
{% macro inputconfig(question) -%}
|
||||||
{% if ("min" in question) %}
|
{% if ("min" in question) %}
|
||||||
min={{question["min"]}}
|
min={{question["min"]}}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if ("max" in question) %}
|
{% if ("max" in question) %}
|
||||||
max={{question["max"]}}
|
max={{question["max"]}}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if ("step" in question) %}
|
{% if ("step" in question) %}
|
||||||
step={{question["step"]}}
|
step={{question["step"]}}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{%- endmacro %}
|
{%- endmacro %}
|
||||||
|
|
||||||
@ -49,17 +48,15 @@ step={{question["step"]}}
|
|||||||
<title>Testform</title>
|
<title>Testform</title>
|
||||||
<link rel=" shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
<link rel=" shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||||
<script>const ICON_PATHS = {
|
<script>const ICON_PATHS = {
|
||||||
cameraofficon: "{{ url_for('static', filename='icons/camera-off-icon.png') }}",
|
cameraofficon: "{{ url_for('static', filename='icons/camera-off-icon.png') }}",
|
||||||
cameraicon: "{{ url_for('static', filename='icons/camera-icon.png') }}",
|
cameraicon: "{{ url_for('static', filename='icons/camera-icon.png') }}",
|
||||||
stopicon: "{{ url_for('static', filename='icons/stop-icon.png') }}",
|
stopicon: "{{ url_for('static', filename='icons/stop-icon.png') }}",
|
||||||
recordicon: "{{ url_for('static', filename='icons/record-icon.png') }}"
|
recordicon: "{{ url_for('static', filename='icons/record-icon.png') }}"
|
||||||
};</script>
|
};</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="centercontent">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Stimulus part</h2>
|
|
||||||
{% if (stimulus_type == "single_video") %}
|
{% if (stimulus_type == "single_video") %}
|
||||||
{{ single_video(**stimulus_configuration) }}
|
{{ single_video(**stimulus_configuration) }}
|
||||||
{% elif (stimulus_type == "empty") %}
|
{% elif (stimulus_type == "empty") %}
|
||||||
@ -68,18 +65,16 @@ step={{question["step"]}}
|
|||||||
<p>Error: Block {{ stimulus["type"] }} could not be loaded!</p>
|
<p>Error: Block {{ stimulus["type"] }} could not be loaded!</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
<form class="formlayout" id="question_form" action="http://localhost:5000/send_json" method="post">
|
||||||
|
|
||||||
<h2>Questions</h2>
|
|
||||||
<form id="question_form" action="http://localhost:5000/send_json" method="post">
|
|
||||||
{% for question in questions %}
|
{% for question in questions %}
|
||||||
{% if (questions[question]["type"] == "likert") %}
|
{% if (questions[question]["type"] == "likert") %}
|
||||||
<div class="likercontainer">
|
<div class="likercontainer">
|
||||||
|
<h3>{{ questions[question]['text']}}</h3>
|
||||||
<div class="likert">
|
<div class="likert">
|
||||||
{{ questions[question]['text']}}
|
|
||||||
{% for point in questions[question]["points"] %}
|
{% for point in questions[question]["points"] %}
|
||||||
<label>
|
<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'] }}"
|
value="{{ questions[question]['points'][point]['value'] }}"
|
||||||
{{required(questions[question])}} /><span>{{ questions[question]['points'][point]['text']
|
{{required(questions[question])}} /><span>{{ questions[question]['points'][point]['text']
|
||||||
}}</span>
|
}}</span>
|
||||||
@ -91,59 +86,69 @@ step={{question["step"]}}
|
|||||||
{% elif (questions[question]["type"] == "textinput") %}
|
{% elif (questions[question]["type"] == "textinput") %}
|
||||||
<div class="textarea-container">
|
<div class="textarea-container">
|
||||||
<label class="textarea-label">
|
<label class="textarea-label">
|
||||||
{{ questions[question]['text']}}
|
{{ questions[question]['text']}}
|
||||||
<textarea id="{{ questions[question]['name'] }}" name="{{ questions[question]['name'] }}" rows="6"
|
<textarea id="{{ questions[question]['name'] }}" name="{{ questions[question]['name'] }}" rows="6"
|
||||||
cols="60" maxlength="{{ questions[question]['size'] }}"
|
cols="60" maxlength="{{ questions[question]['size'] }}"
|
||||||
{{required(questions[question])}}></textarea>
|
{{required(questions[question])}}></textarea>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% elif (questions[question]["type"] == "dateinput") %}
|
{% elif (questions[question]["type"] == "dateinput") %}
|
||||||
<label>
|
<div class="compressWidth">
|
||||||
{{ questions[question]['text']}}
|
<label>
|
||||||
<input type="date" name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
|
{{ questions[question]['text']}}<input type="date" name="{{ questions[question]['name']}}"
|
||||||
</label>
|
id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
{% elif (questions[question]["type"] == "numberinput") %}
|
{% elif (questions[question]["type"] == "numberinput") %}
|
||||||
<label>
|
<div class="compressWidth">
|
||||||
{{ questions[question]['text']}}
|
<label>
|
||||||
<input type="number" name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}" {{inputconfig(questions[question])}} {{required(questions[question])}}>
|
{{ questions[question]['text']}}<input type="number" name="{{ questions[question]['name']}}"
|
||||||
</label>
|
id="{{ questions[question]['name'] }}" {{inputconfig(questions[question])}}
|
||||||
|
{{required(questions[question])}}>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% elif (questions[question]["type"] == "emailinput") %}
|
{% elif (questions[question]["type"] == "emailinput") %}
|
||||||
<label>
|
<div class="compressWidth">
|
||||||
{{ questions[question]['text']}}
|
<label>
|
||||||
<input type="email" name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
|
{{ questions[question]['text']}}<input type="email" name="{{ questions[question]['name']}}"
|
||||||
</label>
|
id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% elif (questions[question]["type"] == "dropdowninput") %}
|
{% elif (questions[question]["type"] == "dropdowninput") %}
|
||||||
<label>
|
<div class="compressWidth">
|
||||||
{{ questions[question]['text']}}
|
<label>
|
||||||
<select name="{{ questions[question]['name']}}" {{required(questions[question])}}>
|
{{ questions[question]['text']}}<select name="{{ questions[question]['name']}}"
|
||||||
<option value="" disabled selected>{{ questions[question]['defaulttext']}}</option>
|
{{required(questions[question])}}>
|
||||||
{% for point in questions[question]["points"] %}
|
<option value="" disabled selected>{{ questions[question]['defaulttext']}}</option>
|
||||||
|
{% for point in questions[question]["points"] %}
|
||||||
<option name="{{ point }}" id="{{ point }}"
|
<option name="{{ point }}" id="{{ point }}"
|
||||||
value="{{ questions[question]['points'][point]['value'] }}"
|
value="{{ questions[question]['points'][point]['value'] }}"
|
||||||
{{required(questions[question])}}><span>{{ questions[question]['points'][point]['text']
|
{{required(questions[question])}}><span>{{ questions[question]['points'][point]['text']
|
||||||
}}</span></option>
|
}}</span></option>
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% elif (questions[question]["type"] == "videoinput") %}
|
{% elif (questions[question]["type"] == "videoinput") %}
|
||||||
|
<div class="spacer" aria-hidden="true" style="height:30px"></div>
|
||||||
<h2>Gib Feedback als Video</h2>
|
<h2>Gib Feedback als Video</h2>
|
||||||
|
<h3>{{ questions[question]['text']}}</h3>
|
||||||
|
|
||||||
<div class="centertext">
|
<div class="centertext">
|
||||||
{{ questions[question]['text']}}
|
|
||||||
<button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
|
<button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
|
||||||
<img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}"
|
<img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}"
|
||||||
alt="Camera Icon">
|
alt="Camera Icon">
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="spacer" aria-hidden="true" style="height:30px"></div>
|
<div class="spacer" aria-hidden="true" style="height:30px"></div>
|
||||||
<div class="centertext">
|
|
||||||
|
|
||||||
<button type="button" class="videocontrols" id="buttonRecord" style="display:none"
|
<button type="button" class="videocontrols" id="buttonRecord" style="display:none"
|
||||||
onclick="recordButton()">
|
onclick="recordButton()">
|
||||||
<img id="buttonRecordIcon" src="{{ url_for('static', filename='icons/record-icon.png')}}"
|
<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')}}"
|
<img id="buttonDeleteIcon" src="{{ url_for('static', filename='icons/trash-icon.png')}}"
|
||||||
alt="Delete Icon" class="buttondisable">
|
alt="Delete Icon" class="buttondisable">
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="spacer" aria-hidden="true" style="height:15px"></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>
|
<video autoplay muted playsinline id="videoDisplay"></video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="{{ url_for('static', filename='videoscript.js')}}">
|
<script src="{{ url_for('static', filename='videoscript.js')}}">
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
|
<p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<div class="button-container">
|
<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> -->
|
<!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> -->
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -8,7 +8,6 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="centercontent">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Hello! Thank you for participating in our study!</h2>
|
<h2>Hello! Thank you for participating in our study!</h2>
|
||||||
<form action="http://localhost:5000/start" method="post">
|
<form action="http://localhost:5000/start" method="post">
|
||||||
@ -19,7 +18,6 @@
|
|||||||
<p><input id="submitbutton" type = "submit" value = "submit" /></p>
|
<p><input id="submitbutton" type = "submit" value = "submit" /></p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -9,7 +9,6 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="centercontent"></div>
|
|
||||||
<div class="container">
|
<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>
|
<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">
|
<form action="http://localhost:5000/send_json" method="post">
|
||||||
@ -17,6 +16,5 @@
|
|||||||
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
|
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -9,7 +9,6 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="centercontent">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p>This is just a test page for the single page option of the json configuration</p>
|
<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">
|
<form action="http://localhost:5000/send_json" method="post">
|
||||||
@ -22,6 +21,5 @@
|
|||||||
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
|
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,6 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<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')}}-->
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="centercontent">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Hello! Thank you for participating in our study!</h2>
|
<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">
|
<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>
|
<input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the +terms and conditions</a>
|
||||||
</label>
|
</label>
|
||||||
|
<div class="button-container">
|
||||||
<p><input id="submitbutton" type = "submit" value = "submit" /></p>
|
<input id="submitbutton" type = "submit" value = "submit" />
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user