diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html index c8ea2f6..0a4d92b 100644 --- a/src/app/live/live.page.html +++ b/src/app/live/live.page.html @@ -91,6 +91,7 @@ + diff --git a/src/app/quiz/mcq/mcq.component.html b/src/app/quiz/mcq/mcq.component.html index 7727a5d..84da4a8 100644 --- a/src/app/quiz/mcq/mcq.component.html +++ b/src/app/quiz/mcq/mcq.component.html @@ -1,10 +1,10 @@ {{ text }} - + + [ngClass]="{'correct': selectedChoice === choice.value && selectedChoice === correctAnswer, 'wrong': selectedChoice === choice.value && selectedChoice !== correctAnswer }"> {{ choice.text }} diff --git a/src/app/quiz/mcq/mcq.component.scss b/src/app/quiz/mcq/mcq.component.scss index c81a6f4..6ace076 100644 --- a/src/app/quiz/mcq/mcq.component.scss +++ b/src/app/quiz/mcq/mcq.component.scss @@ -10,6 +10,10 @@ h3 { .options { margin: 30px auto; + &.inactive { + pointer-events: none; + } + button { border: 3px solid rgba($sea-blue, 0.3); display: flex; @@ -23,14 +27,26 @@ h3 { margin: 15px 0; width: 100%; padding: 0 15px; + + &.correct { + background-color: $green; + border-color: darken($green, 10%); + font-weight: 500; + } + + &.wrong { + background-color: rgba(orange, 0.8); + border-color: orange; + font-weight: 500; + } } ion-checkbox { --background: transparent; --border-color: #2ea9f586; --border-width: 2px; - --border-color-checked: var(--ion-color-primary); - --background-checked: var(--ion-color-primary); + --border-color-checked: white; + --background-checked: transparent; --size: 25px; --checkmark-width: 2px; --checkmark-color: white; diff --git a/src/app/quiz/quiz.page.ts b/src/app/quiz/quiz.page.ts index 8221075..574da93 100644 --- a/src/app/quiz/quiz.page.ts +++ b/src/app/quiz/quiz.page.ts @@ -66,19 +66,40 @@ export class QuizPage implements OnInit { this.questions = [{ type: 'MCQ', - question: faker.lorem.sentence(), + question: 'Who has highest S/R in KXIP history?', choices: [{ value: 'A', - text: 'Choice 1' + text: 'Rahul K L' }, { value: 'B', - text: 'Choice 2' + text: 'Glen Maxwell' }, { value: 'C', - text: 'Choice 3' + text: 'V Sehwag' + }, { + value: 'D', + text: 'R Ashwin' }], correctAnswer: 'A', - secondsAllotted: 50 + secondsAllotted: 20 + }, { + type: 'MCQ', + question: 'Who Scored highest runs in KXIP History?', + choices: [{ + value: 'A', + text: 'Rahul K L' + }, { + value: 'B', + text: 'Glen Maxwell' + }, { + value: 'C', + text: 'V Sehwag' + }, { + value: 'D', + text: 'N Pooran' + }], + correctAnswer: 'C', + secondsAllotted: 20 }, { type: 'CARD', question: cardQuestions,