Added clickable questions and reload button
This commit is contained in:
parent
f09c13f9cc
commit
65b8afb47b
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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"> </div>
|
||||
<form action="/"><button id="next" type="submit">Neue Fragen</button></form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
Loading…
Reference in New Issue