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

Some CSS Imporvements

Browse Source
This commit is contained in:
Jan 2024-06-05 20:55:54 +02:00
parent 71590b425b
commit bd750eb9a2
2 changed files with 96 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
slaeforms/static/styles.css
View File

@ -2,6 +2,9 @@ body {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
display: flex;
justify-content: center;
/*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;
@ -17,6 +20,38 @@ body {
filter: invert(65%); 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 */
}
.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 */
}
.container {
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);
}
.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 */
@ -63,6 +98,11 @@ iframe {
} }
form {
text-align: center;
}
.centertext { .centertext {
text-align: center; text-align: center;
} }

101
slaeforms/templates/standard_template.html
View File

@ -1,19 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
{% macro single_video(video_url, embed="yt", title="",width="560", height="315", class="center", code="<p>No code given</p>") -%} {% macro single_video(video_url, embed="yt", title="",width="560", height="315", class="center", code="<p>No code given
{% if (embed == "yt") %} </p>") -%}
<div class={{center}}> {% if (embed == "yt") %}
{% if (title != "") %} <div class={{center}}>
<h3>{{title}}</h3> {% if (title != "") %}
{% endif %} <h3>{{title}}</h3>
<iframe width={{width}} height={{height}} 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>
{% else %}
{{code}}
{% endif %} {% endif %}
<iframe width={{width}} height={{height}} 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>
{% else %}
{{code}}
{% endif %}
{%- endmacro %} {%- endmacro %}
{% macro required(question) -%} {% macro required(question) -%}
@ -23,51 +24,61 @@ required
{%- endmacro %} {%- endmacro %}
{% macro input(name, value='', type='text', size=20) -%} {% macro input(name, value='', type='text', size=20) -%}
<input type="{{ type }}" name="{{ name }}" value="{{ <input type="{{ type }}" name="{{ name }}" value="{{
value|e }}" size="{{ size }}"> value|e }}" size="{{ size }}">
{%- endmacro %} {%- endmacro %}
<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')}}-->
<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') }}">
</head> </head>
<body> <body>
<div class="container">
<h2>Stimulus part</h2>
{% if (stimulus_type == "single_video") %}
{{ single_video(**stimulus_configuration) }}
{% elif (False) %}
<h2>Stimulus part</h2> {% else %}
{% if (stimulus_type == "single_video") %} <p>Error: Block {{ stimulus["type"] }} could not be loaded!</p>
{{ single_video(**stimulus_configuration) }} {% endif %}
{% elif (False) %}
{% else %}
<p>Error: Block {{ stimulus["type"] }} could not be loaded!</p>
{% endif %}
<h2>Questions</h2> <h2>Questions</h2>
<form action="http://localhost:5000/send_json" method="post"> <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">
<div class="likert"> <div class="likert">
{% for point in questions[question]["points"] %} {% for point in questions[question]["points"] %}
<label><input name="likertscale" type="radio" value="{{ questions[question]['points'][point]['value'] }}" {{required(questions[question])}}/><span>{{ questions[question]['points'][point]['text'] }}</span></label> <label><input name="likertscale" type="radio"
{% endfor %} value="{{ questions[question]['points'][point]['value'] }}"
{{required(questions[question])}} /><span>{{ questions[question]['points'][point]['text']
}}</span></label>
{% endfor %}
</div>
</div>
{% elif (questions[question]["type"] == "textinput") %}
<div class="textarea-container">
<label class="textarea-label" for="{{ questions[question]['name'] }}">Additional Feedback: </label>
<textarea id="{{ questions[question]['name'] }}" name="{{ questions[question]['name'] }}" rows="6"
cols="60" maxlength="{{ questions[question]['size'] }}"
{{required(questions[question])}}></textarea>
</div>
{% 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>
</div>
</form>
</div> </div>
</div>
{% elif (questions[question]["type"] == "textinput") %}
<label for="{{ questions[question]['name'] }}">Additional Feedback: </label>
<textarea id="{{ questions[question]['name'] }}" name="{{ questions[question]['name'] }}" rows="3" cols="30" maxlength="{{ questions[question]['size'] }}" {{required(questions[question])}}></textarea>
{% else %}
<p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
{% endif %}
{% endfor %}
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
</form>
</body> </body>
</html> </html>