fix: skipping questions bug and overall UI and flow update
This commit is contained in:
Ayobami
+121
-48
@@ -276,6 +276,10 @@ input[type="number"] {
|
||||
background: #444242;
|
||||
}
|
||||
|
||||
#resumeButton {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
/*page 1 ends*/
|
||||
|
||||
/*page 2 starts*/
|
||||
@@ -848,8 +852,8 @@ input::-ms-input-placeholder {
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid black;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
bottom: 4px;
|
||||
}
|
||||
#page4 .customImgRow img {
|
||||
width: 335px;
|
||||
@@ -899,6 +903,14 @@ input::-ms-input-placeholder {
|
||||
line-height: 30px;
|
||||
margin: 0px;
|
||||
}
|
||||
#response-timer {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin-top: 24px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
/*page 5 ends here*/
|
||||
|
||||
/*page6 starts*/
|
||||
@@ -1447,63 +1459,124 @@ img.image-missing {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
#resetQuizButton,
|
||||
#resumeButton {
|
||||
background: #737a73;
|
||||
color: #fff;
|
||||
font: 12px "Necto Mono";
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 10px 32px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
outline: none;
|
||||
#termination-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
z-index: 9999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#resetQuizButton:hover,
|
||||
#resumeButton:hover,
|
||||
#resetQuizButton:focus,
|
||||
#resumeButton:focus {
|
||||
background: #444242;
|
||||
#termination-overlay .termination-content {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#termination-overlay .termination-message {
|
||||
color: #fff;
|
||||
font-family: "Necto Mono", monospace;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
#termination-overlay .termination-title {
|
||||
color: #fff;
|
||||
font-family: "Bradford LL", serif;
|
||||
font-size: 2.5rem;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
#termination-overlay .termination-counter {
|
||||
color: #fff;
|
||||
font-family: "Bradford LL", serif;
|
||||
font-size: 3.5rem;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
#questionNavBar .nav-btn {
|
||||
font: 12px "Necto Mono";
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 16px !important;
|
||||
margin: 0 4px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
border: none;
|
||||
#resetQuizButton {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 24px;
|
||||
background: #fff;
|
||||
color: #222;
|
||||
border: 2px solid #222;
|
||||
border-radius: 6px;
|
||||
padding: 8px 20px;
|
||||
font-size: 1rem;
|
||||
font-family: "Bradford LL", serif;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
#resetQuizButton:hover {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#question-nav-bar {
|
||||
width: 100%;
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 12px 0 8px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 48px;
|
||||
}
|
||||
#questionNavBar .nav-btn.answered {
|
||||
background: #43a047;
|
||||
color: #fff;
|
||||
border: 2px solid #388e3c;
|
||||
.question-nav-inner {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
#questionNavBar .nav-btn.current {
|
||||
background: #1976d2;
|
||||
color: #fff;
|
||||
border: 3px solid #1565c0;
|
||||
box-shadow: 0 0 8px 2px rgba(25, 118, 210, 0.15);
|
||||
z-index: 2;
|
||||
}
|
||||
#questionNavBar .nav-btn.unanswered {
|
||||
background: #ccc;
|
||||
color: #888;
|
||||
.question-nav-btn {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #bbb;
|
||||
}
|
||||
#questionNavBar .nav-btn:hover,
|
||||
#questionNavBar .nav-btn:focus {
|
||||
filter: brightness(0.95);
|
||||
background: #fff;
|
||||
color: #bbb;
|
||||
font-size: 1.1rem;
|
||||
font-family: "Bradford LL", serif;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
.question-nav-btn.answered {
|
||||
background: #e0ffe0;
|
||||
color: #1a7f1a;
|
||||
border-color: #1a7f1a;
|
||||
}
|
||||
.question-nav-btn.current {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
border-color: #222;
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #222;
|
||||
}
|
||||
.question-nav-btn.unanswered {
|
||||
background: #fff;
|
||||
color: #bbb;
|
||||
border-color: #bbb;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.question-nav-btn:hover {
|
||||
background: #f0f0f0;
|
||||
color: #222;
|
||||
border-color: #222;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user