|
body { |
|
font-family: Arial, sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
background-color: #f4f4f9; |
|
} |
|
|
|
#quiz-container { |
|
display: none; |
|
padding: 20px; |
|
margin: 20px auto; |
|
background: white; |
|
border: 1px solid #ddd; |
|
border-radius: 5px; |
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
#file-selection, #results-container { |
|
padding: 20px; |
|
margin: 20px auto; |
|
background: white; |
|
border: 1px solid #ddd; |
|
border-radius: 5px; |
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
h2 { |
|
font-size: 16px; |
|
color: #333; |
|
margin-bottom: 15px; |
|
} |
|
|
|
#options { |
|
margin-top: 20px; |
|
} |
|
|
|
label { |
|
display: block; |
|
font-size: 16px; |
|
margin-bottom: 10px; |
|
cursor: pointer; |
|
} |
|
|
|
#navigation { |
|
justify-content: start; |
|
margin-top: 20px; |
|
} |
|
|
|
#timer, #question-number { |
|
margin-bottom: 20px; |
|
font-size: 18px; |
|
color: #555; |
|
} |
|
|
|
button#restart { |
|
padding: 10px 20px; |
|
font-size: 16px; |
|
border: none; |
|
background-color: #28a745; |
|
color: white; |
|
cursor: pointer; |
|
border-radius: 5px; |
|
transition: background-color 0.3s ease; |
|
} |
|
|
|
button#restart:hover { |
|
background-color: #218838; |
|
} |
|
|
|
table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
margin-top: 20px; |
|
} |
|
|
|
th, td { |
|
border: 1px solid #ddd; |
|
padding: 10px; |
|
text-align: left; |
|
} |
|
|
|
th { |
|
background-color: #f4f4f4; |
|
} |
|
|
|
td.correct { |
|
background-color: #d4edda; |
|
color: #155724; |
|
} |
|
|
|
td.incorrect { |
|
background-color: #f8d7da; |
|
color: #721c24; |
|
} |
|
|
|
td.not-answered { |
|
background-color: #fff3cd; |
|
color: #856404; |
|
} |
|
|