More UI improvements
This commit is contained in:
parent
91802c2ecd
commit
8a1c7aff42
BIN
slaeforms/static/icons/sl-icon.png
Normal file
BIN
slaeforms/static/icons/sl-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
@ -334,10 +334,13 @@ iframe {
|
||||
gap: 10px; /* Adjust spacing */
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
max-width: 70%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.likertlabel {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.likertinput {
|
||||
|
||||
@ -131,7 +131,7 @@ step={{question["step"]}}
|
||||
</div>
|
||||
</dialog>
|
||||
<button class="dialogBtn"><img class="infoButtonIcon" id="buttonInfoIcon"
|
||||
src="{{ url_for('static', filename='icons/info-icon.png')}}" alt="Info Icon"></button>
|
||||
src="{{ url_for('static', filename='icons/sl-icon.png')}}" alt="Info Icon"></button>
|
||||
<script src="{{ url_for('static', filename='infoDialogScript.js')}}"></script>
|
||||
{% endif %}
|
||||
|
||||
@ -149,7 +149,14 @@ step={{question["step"]}}
|
||||
<form class="formlayout" id="question_form" action="{{ url_for('sendpage') }}" method="post">
|
||||
|
||||
{% for question in questions %}
|
||||
{% if (questions[question]["type"] == "likert") %}
|
||||
{% if (questions[question]["type"] == "textblock") %}
|
||||
|
||||
<div class="spacer" aria-hidden="true" style="height:30px"></div>
|
||||
<h3 style="margin: auto;">{{ questions[question]['text']}}</h3>
|
||||
<div class="spacer" aria-hidden="true" style="height:30px"></div>
|
||||
|
||||
|
||||
{% elif (questions[question]["type"] == "likert") %}
|
||||
<div class="likertcontainer">
|
||||
<h3>{{ questions[question]['text']}}</h3>
|
||||
<div class="likert" style="--likert-rows: {{ questions[question]['points']|length() }}">
|
||||
@ -164,6 +171,26 @@ step={{question["step"]}}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
||||
|
||||
{% elif (questions[question]["type"] == "likert-basic") %}
|
||||
|
||||
<h3>{{ questions[question]['text']}}</h3>
|
||||
|
||||
<div class="normal-likert-container">
|
||||
{% for point in questions[question]["points"] %}
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" 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>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
||||
|
||||
{% elif (questions[question]["type"] == "textinput") %}
|
||||
<div class="textarea-container">
|
||||
<label class="textarea-label">
|
||||
@ -173,6 +200,18 @@ step={{question["step"]}}
|
||||
maxlength="{{ questions[question]['size'] }}" {{required(questions[question])}}></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
||||
|
||||
{% elif (questions[question]["type"] == "textinput") %}
|
||||
<div class="textarea-container">
|
||||
<label class="textarea-label">
|
||||
{{ questions[question]['text']}}
|
||||
<textarea class="inputs" id="{{ questions[question]['name'] }}"
|
||||
name="{{ questions[question]['name'] }}" rows="6" cols="60"
|
||||
maxlength="{{ questions[question]['size'] }}" {{required(questions[question])}}></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
||||
|
||||
{% elif (questions[question]["type"] == "dateinput") %}
|
||||
<div class="compressWidth">
|
||||
@ -182,6 +221,8 @@ step={{question["step"]}}
|
||||
{{required(questions[question])}}>
|
||||
</label>
|
||||
</div>
|
||||
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
||||
|
||||
{% elif (questions[question]["type"] == "numberinput") %}
|
||||
<div class="compressWidth">
|
||||
<label>
|
||||
@ -190,6 +231,7 @@ step={{question["step"]}}
|
||||
{{inputconfig(questions[question])}} {{required(questions[question])}}>
|
||||
</label>
|
||||
</div>
|
||||
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
||||
|
||||
{% elif (questions[question]["type"] == "emailinput") %}
|
||||
<div class="compressWidth">
|
||||
@ -199,6 +241,7 @@ step={{question["step"]}}
|
||||
{{required(questions[question])}}>
|
||||
</label>
|
||||
</div>
|
||||
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
||||
|
||||
{% elif (questions[question]["type"] == "dropdowninput") %}
|
||||
<div class="compressWidth">
|
||||
@ -216,6 +259,7 @@ step={{question["step"]}}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
||||
|
||||
{% elif (questions[question]["type"] == "multiplechoice") %}
|
||||
<div class="compressWidth">
|
||||
@ -231,6 +275,7 @@ step={{question["step"]}}
|
||||
{% endfor %}
|
||||
</label>
|
||||
</div>
|
||||
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
||||
|
||||
{% elif (questions[question]["type"] == "videoinput") %}
|
||||
<div class="spacer" aria-hidden="true" style="height:30px"></div>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
<source src="{{ url_for('static', filename='videos/GLEISvariations.mp4') }}" type="video/mp4">
|
||||
</video>
|
||||
|
||||
|
||||
|
||||
<form class="formlayout" id="question_form" action="{{ url_for('sendpage') }}" method="post">
|
||||
|
||||
|
||||
@ -33,97 +33,69 @@
|
||||
<div class="likert" style="--likert-rows: 7">
|
||||
|
||||
<label>
|
||||
<input class="inputs" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 1 </span>
|
||||
<input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 1
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="inputs" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 2 </span>
|
||||
<input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 2
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="inputs" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 3 </span>
|
||||
<input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 3
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="inputs" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 4 </span>
|
||||
<input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 4
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="inputs" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 5 </span>
|
||||
<input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 5
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="inputs" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 6 </span>
|
||||
<input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 6
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="inputs" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 7 </span>
|
||||
<input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 7
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="normal-likert-container" style="--likert-rows: 7">
|
||||
<div class="normal-likert-container" style="--likert-rows: 7">
|
||||
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 1 </span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 2 </span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 3 </span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 4 </span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 5 </span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 6 </span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio"
|
||||
id="test1"
|
||||
value="1"
|
||||
required /><span> Option 7 </span>
|
||||
</label>
|
||||
</div>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 1
|
||||
</span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 2
|
||||
</span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 3
|
||||
</span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 4
|
||||
</span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 5
|
||||
</span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 6
|
||||
</span>
|
||||
</label>
|
||||
<label class="likertlabel">
|
||||
<input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 7
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -133,9 +105,7 @@
|
||||
|
||||
<div class="textarea-container">
|
||||
<label class="textarea-label">
|
||||
<textarea class="inputs" id="text"
|
||||
name="text" rows="6" cols="60"
|
||||
maxlength="200"></textarea>
|
||||
<textarea class="inputs" id="text" name="text" rows="6" cols="60" maxlength="200"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
@ -310,42 +310,127 @@
|
||||
}
|
||||
},
|
||||
"questions": {
|
||||
"question0": {
|
||||
"type": "textblock",
|
||||
"name": "fragestellung",
|
||||
"text": "Bitte bewerten Sie das Video bezüglich der Natürlichkeit, Verständlichkeit und grammatikalischen Korrektheit:"
|
||||
},
|
||||
"question1": {
|
||||
"type": "likert",
|
||||
"name": "likertscale",
|
||||
"text": "Wie würden sie dieses Video bewerten?",
|
||||
"type": "likert-basic",
|
||||
"name": "natürlichkeit",
|
||||
"text": "Natürlichkeit",
|
||||
"required": "true",
|
||||
"points": {
|
||||
"p1": {
|
||||
"naturalness-p1": {
|
||||
"value": "1",
|
||||
"text": "Ich finde es gar nicht gut 🙁👎"
|
||||
"text": "Gar nicht gut 🙁👎"
|
||||
},
|
||||
"p2": {
|
||||
"naturalness-p2": {
|
||||
"value": "2",
|
||||
"text": "Ich finde es nicht gut 👎"
|
||||
"text": ""
|
||||
},
|
||||
"p3": {
|
||||
"naturalness-p3": {
|
||||
"value": "3",
|
||||
"text": "Ich finde es weder gut noch schlecht"
|
||||
"text": ""
|
||||
},
|
||||
"p4": {
|
||||
"naturalness-p4": {
|
||||
"value": "4",
|
||||
"text": "Ich finde es gut 👍"
|
||||
"text": "Weder gut noch schlecht"
|
||||
},
|
||||
"p5": {
|
||||
"naturalness-p5": {
|
||||
"value": "5",
|
||||
"text": "Ich finde es sehr gut 😊👍"
|
||||
"text": ""
|
||||
},
|
||||
"naturalness-p6": {
|
||||
"value": "6",
|
||||
"text": ""
|
||||
},
|
||||
"naturalness-p7": {
|
||||
"value": "7",
|
||||
"text": "Sehr gut 😊👍"
|
||||
}
|
||||
}
|
||||
},
|
||||
"question2": {
|
||||
"type": "likert-basic",
|
||||
"name": "verständlichkeit",
|
||||
"text": "Verständlichkeit",
|
||||
"required": "true",
|
||||
"points": {
|
||||
"understandability-p1": {
|
||||
"value": "1",
|
||||
"text": "Gar nicht gut 🙁👎"
|
||||
},
|
||||
"understandability--p2": {
|
||||
"value": "2",
|
||||
"text": ""
|
||||
},
|
||||
"understandability--p3": {
|
||||
"value": "3",
|
||||
"text": ""
|
||||
},
|
||||
"understandability--p4": {
|
||||
"value": "4",
|
||||
"text": "Weder gut noch schlecht"
|
||||
},
|
||||
"understandability--p5": {
|
||||
"value": "5",
|
||||
"text": ""
|
||||
},
|
||||
"understandability--p6": {
|
||||
"value": "6",
|
||||
"text": ""
|
||||
},
|
||||
"understandability--p7": {
|
||||
"value": "7",
|
||||
"text": "Sehr gut 😊👍"
|
||||
}
|
||||
}
|
||||
},
|
||||
"question3": {
|
||||
"type": "likert-basic",
|
||||
"name": "gramKorrektheit",
|
||||
"text": "Grammatikalische Korrektheit",
|
||||
"required": "true",
|
||||
"points": {
|
||||
"gramKorrektheit-p1": {
|
||||
"value": "1",
|
||||
"text": "Gar nicht gut 🙁👎"
|
||||
},
|
||||
"gramKorrektheit-p2": {
|
||||
"value": "2",
|
||||
"text": ""
|
||||
},
|
||||
"gramKorrektheit-p3": {
|
||||
"value": "3",
|
||||
"text": ""
|
||||
},
|
||||
"gramKorrektheit-p4": {
|
||||
"value": "4",
|
||||
"text": "Weder gut noch schlecht"
|
||||
},
|
||||
"gramKorrektheit-p5": {
|
||||
"value": "5",
|
||||
"text": ""
|
||||
},
|
||||
"gramKorrektheit-p6": {
|
||||
"value": "6",
|
||||
"text": ""
|
||||
},
|
||||
"gramKorrektheit-p7": {
|
||||
"value": "7",
|
||||
"text": "Sehr gut 😊👍"
|
||||
}
|
||||
}
|
||||
},
|
||||
"question4": {
|
||||
"type": "textinput",
|
||||
"name": "text_feedback",
|
||||
"text": "Hier können sie uns Feedback geben",
|
||||
"text": "Hier können sie Feedback zum Avatar geben",
|
||||
"required": "false",
|
||||
"size": "250"
|
||||
},
|
||||
"question3": {
|
||||
"question5": {
|
||||
"type": "videoinput",
|
||||
"text": "Hier können sie per Video Feedback geben",
|
||||
"name": "video_feedback",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user