Added clickable questions and reload button
This commit is contained in:
		
							parent
							
								
									f09c13f9cc
								
							
						
					
					
						commit
						65b8afb47b
					
				
					 2 changed files with 67 additions and 3 deletions
				
			
		|  | @ -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…
	
	Add table
		
		Reference in a new issue