Added clickable questions and reload button

This commit is contained in:
root 2023-06-02 18:30:06 +02:00
parent f09c13f9cc
commit 65b8afb47b
2 changed files with 67 additions and 3 deletions

View File

@ -47,9 +47,13 @@ html, body {
box-sizing: border-box;
padding: 25px;
border-radius: 10px;
border: 1px solid transparent;
background-color: gold;
color: #000000;
font-weight: bold;
text-align:left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
}
.b {
@ -58,9 +62,30 @@ html, body {
box-sizing: border-box;
padding: 25px;
border-radius: 10px;
border: 1px solid transparent;
background-color: rgb(0, 0, 0);
color: rgb(232, 230, 227);
font-weight: bold;
text-align:left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
}
input[type="radio"] {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
cursor: pointer;
}
.ab input:checked + label {
background-color: rgb(44, 116, 148);
border: 1px solid #000000;
color: #eeeeee;
}
.separator {
@ -76,12 +101,35 @@ html, body {
}
#footer {
margin-top: 15px;
margin-top: 10px;
}
#questions {
font-size: small;
text-align: center;
width: 45%;
float: left;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 25px;
color: #eeeeee;
font-weight: bold;
}
#next {
text-align: center;
width: 45%;
float: left;
border: 0px;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 25px;
background-color: rgb(79, 86, 89);
color: #eeeeee;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
display: block;
cursor: pointer;
}
@media only screen and (max-width:480px) {
@ -94,6 +142,16 @@ html, body {
transform: translate(-50%);
}
#next {
min-width: 95%;
}
#questions {
min-width: 95%;
padding-top: 0px;
padding-bottom: 5px;
}
.a {
font-size: small;
}

View File

@ -16,15 +16,21 @@
<body>
<div id="content">
<div id="header">{{ title }}</div>
{% set id = namespace(value=0) %}
{% for question in content %}
{% set id.value = id.value + 1 %}
<div class="ab">
<div class="a">A) {{ question['A'] }}</div>
<input type="radio" id="a{{ id.value }}" class="a" name="group-{{ id.value }}">
<label for="a{{ id.value }}" class="a"> A) {{ question['A'] }}</label>
<div class="separator">{{ separator }}</div>
<div class="b">B) {{ question['B'] }}</div>
<input type="radio" id="b{{ id.value }}" class="b" name="group-{{ id.value }}">
<label for="b{{ id.value }}" class="b">B) {{ question['B'] }}</label>
</div>
{% endfor %}
<div id="footer">
<div id="questions">Es gibt derzeit {{ num_lines }} Fragen.</div>
<div class="separator">&nbsp;</div>
<form action="/"><button id="next" type="submit">Neue Fragen</button></form>
</div>
</div>
</body>