1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- /* Taken from https://code-boxx.com/simple-javascript-quiz */
- /* (A) WRAPPER */
- #quizWrap {
- border-style: solid;
- border-collapse: collapse;
- background: #e0e0e0;
- }
- #quizNumber,#quizScore{
- text-align: center;
- padding: 10px;
- border-width: thin;
- border-style: solid;
- border-left-style: none;
- border-right-style: none;
- }
- #quizScore{
- border-bottom-style: none;
- }
- #quizRestart {
- margin: auto;
- margin-bottom: 10px;
- text-align: center;
- padding: 10px;
- border-radius: 10px;
- border-style: solid;
- border-width: thin;
- background: #d8ffc4;
- width: 100px;
- cursor: pointer;
- }
- #quizQn {
- padding: 20px;
- text-align: center;
- font-weight: bold;
- }
- /* (C) ANSWERS */
- #quizAns {
- margin: 10px;
- text-align: center;
- border-width: thin;
- display: grid;
- grid-template-columns: auto auto;
- grid-gap: 10px;
- justify-content: space-evenly;
- align-content: space-evenly;
- }
- #quizAns input[type=radio] { display: none; }
- #quizAns label {
- /* background: #cccccc;
- border: 1px solid #eee;
- font-size: 20px; */
- cursor: pointer;
- background: #ffffff;
- font-weight: bold;
- padding: 10px;
- border-radius: 10px;
- border-style: solid;
- border-width: thin;
- margin-top: 5px;
- margin-left: 25px;
- margin-right: 25px;
- margin-bottom: 5px;
- }
- #quizAns label.correct {
- background: #d8ffc4;
- border: 1px solid #60a03f;
- }
- #quizAns label.wrong {
- background: #ffe8e8;
- border: 1px solid #c78181;
- }
|