gpkvt/abgame
1
0
Fork 0
Code Issues Pull requests Projects Releases 4 Packages Wiki Activity

Added clickable questions and reload button

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

60
static/css/ab.css
View file

@ -47,9 +47,13 @@ html, body {
box-sizing: border-box; box-sizing: border-box;
padding: 25px; padding: 25px;
border-radius: 10px; border-radius: 10px;
border: 1px solid transparent;
background-color: gold; background-color: gold;
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
text-align:left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
} }
.b { .b {
@ -58,9 +62,30 @@ html, body {
box-sizing: border-box; box-sizing: border-box;
padding: 25px; padding: 25px;
border-radius: 10px; border-radius: 10px;
border: 1px solid transparent;
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
color: rgb(232, 230, 227); color: rgb(232, 230, 227);
font-weight: bold; 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 { .separator {
@ -76,12 +101,35 @@ html, body {
} }
#footer { #footer {
margin-top: 15px; margin-top: 10px;
} }
#questions { #questions {
font-size: small; font-size: small;
text-align: center; 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) { @media only screen and (max-width:480px) {
@ -94,6 +142,16 @@ html, body {
transform: translate(-50%); transform: translate(-50%);
} }
#next {
min-width: 95%;
}
#questions {
min-width: 95%;
padding-top: 0px;
padding-bottom: 5px;
}
.a { .a {
font-size: small; font-size: small;
} }

10
templates/index.html
View file

@ -16,15 +16,21 @@
<body> <body>
<div id="content"> <div id="content">
<div id="header">{{ title }}</div> <div id="header">{{ title }}</div>
{% set id = namespace(value=0) %}
{% for question in content %} {% for question in content %}
{% set id.value = id.value + 1 %}
<div class="ab"> <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="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> </div>
{% endfor %} {% endfor %}
<div id="footer"> <div id="footer">
<div id="questions">Es gibt derzeit {{ num_lines }} Fragen.</div> <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>
</div> </div>
</body> </body>