From 81edd9c355b91827d6de8f4395ce42a363b98ab0 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Wed, 24 Jun 2020 12:10:41 +0530 Subject: [PATCH] Quiz List UI to mimic calendar UI --- .../course-details.component.ts | 2 +- src/app/tabs/courses/quiz/quiz.component.html | 166 +++++++--- src/app/tabs/courses/quiz/quiz.component.scss | 302 +++++++++++++++++- src/app/tabs/courses/quiz/quiz.component.ts | 129 +++++++- src/assets/custom-icons/beaker.svg | 1 + src/assets/custom-icons/list.svg | 71 ++++ src/assets/custom-icons/xpcoins.svg | 122 +++++++ 7 files changed, 738 insertions(+), 55 deletions(-) create mode 100644 src/assets/custom-icons/beaker.svg create mode 100644 src/assets/custom-icons/list.svg create mode 100644 src/assets/custom-icons/xpcoins.svg diff --git a/src/app/tabs/courses/course-details/course-details.component.ts b/src/app/tabs/courses/course-details/course-details.component.ts index d9e6dbd..d00944b 100644 --- a/src/app/tabs/courses/course-details/course-details.component.ts +++ b/src/app/tabs/courses/course-details/course-details.component.ts @@ -62,7 +62,7 @@ export class CourseDetailsComponent implements OnInit { mediaState: 'none', isCompleted: true, type: 'quiz', - url: '/quiz-chapter', + url: '/quiz', param: 'Earth-2' }] }]; diff --git a/src/app/tabs/courses/quiz/quiz.component.html b/src/app/tabs/courses/quiz/quiz.component.html index f9152f2..2583499 100644 --- a/src/app/tabs/courses/quiz/quiz.component.html +++ b/src/app/tabs/courses/quiz/quiz.component.html @@ -1,4 +1,4 @@ -
+
-
-
-
- - - - - +
+
+
+
+ +
+ +
+ +

+ Today's +

+

+ Super Quiz +

+
+

Play super quiz and earn 500 XP

+
+ +
+
+
+

Today's Quiz is on

+

Chemistry - Oxidation & Reduction

+

+ Time Duration : 15 minutes +

+
+

+ 70 Students have completed +

+ +
-
+
- - -

- {{ question.question }} -

-
-
- 00:60 - - - - +
+
+
+
+ + + + +
+
- + + +

+ {{ question.question }} +

-
    -
  1. - -
    - - +
    +
    + 00:60 + + + +
    -
    2. -
- - +
-
- - + + +
    +
  1. + +
    + + +
    +
    2. +
+ + + +
+ + +
+ + + +
+
Question List
+
    +
  • + + + +
    +
    + +
    +
    +
    • +
+
-
+ diff --git a/src/app/tabs/courses/quiz/quiz.component.scss b/src/app/tabs/courses/quiz/quiz.component.scss index f87287d..b1e6e01 100644 --- a/src/app/tabs/courses/quiz/quiz.component.scss +++ b/src/app/tabs/courses/quiz/quiz.component.scss @@ -2,7 +2,6 @@ background-color: var(--black); height: 100vh; overflow: auto; - padding-bottom: 60px; } .nav-header { @@ -17,7 +16,7 @@ z-index: 1; box-shadow: 0px 0px 5px var(--black); - .close-button { + button { border: 0px; background-color: transparent; .icon { @@ -25,6 +24,16 @@ height: 16px; fill: var(--light-grey); } + + &.list-button { + margin-left: auto; + + .icon { + width: 20px; + height: 20px; + fill: white; + } + } } h5 { @@ -175,6 +184,7 @@ ngx-siema-slide { display: block; + padding-bottom: 60px; .question { line-height: 1.5; @@ -332,11 +342,19 @@ ngx-siema-slide { border: 0px; height: 40px; background-color: transparent; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 500; + font-size: 14px; &.next-button { background-color: var(--teal); color: white; margin-left: auto; + + &.skip { + background-color: var(--dark-grey); + } } &.prev-button { @@ -345,3 +363,283 @@ ngx-siema-slide { } } } + + +.upfold { + overflow: hidden; + padding: 0px 5% 20px; + height: 50vh; + display: flex; + align-items: flex-end; + justify-content: center; + background-color: var(--ash-black); + + .upfold-container { + width: 100%; + } + + figure { + display: block; + width: 100%; + + img { + width: 150px; + height: 150px; + display: block; + margin-left: auto; + } + } + + header { + color: white; + margin-top: -60px; + + img { + display: block; + width: 50px; + height: 50px; + margin: 0 0 10px; + } + } + + h3 { + font-size: 22px; + font-weight: 500; + margin: 5px auto; + } + + h2 { + font-size: 30px; + font-weight: 500; + margin: 5px auto; + } + + p { + font-size: 16px; + color: var(--light-grey); + } +} + +.quiz-details-holder { + background-color: var(--ash-black); + height: calc(50vh - 60px); +} + +.quiz-details { + height: 100%; + width: 100%; + padding: 25px 5% 80px 5%; + background-color: white; + border-top-right-radius: 30px; + border-top-left-radius: 30px; + position: relative; + + header { + margin-bottom: 10px; + p { + font-size: 14px; + margin: 0; + color: var(--dark-grey); + font-weight: 400; + } + + h3 { + font-size: 22px; + font-weight: 500; + margin: 5px auto; + color: var(--teal-green); + line-height: 1.1; + } + } + + .people-count { + font-size: 14px; + color: var(--danger-dark); + } + + .play-button { + display: block; + position: absolute; + bottom: 10px; + left: 5%; + width: 90%; + border-radius: 30px; + height: 45px; + color: white; + background: linear-gradient(180deg, var(--teal), var(--teal-green)); + border: 0px; + font-size: 14px; + letter-spacing: 1px; + font-weight: 500; + margin: 15px auto; + } +} + +.quiz-list-slideup { + width: 100%; + background-color: white; + overflow: hidden; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + position: fixed; + z-index: 1; + bottom: 0; + left: 0; + transform: translateY(100vh); + transition: transform 0.5s; + + &.active { + transform: translateY(0vh); + } + + &::before { + content: ''; + position: absolute; + width: 60px; + height: 4px; + border-radius: 30px; + background-color: var(--light-grey); + left: calc(50% - 30px); + top: 20px; + } + + header { + color: var(--dark-grey); + font-size: 16px; + font-weight: 700; + margin: 40px auto 10px; + padding: 0 5%; + } + + ul { + list-style: none; + max-height: 60vh; + overflow: auto; + padding-bottom: 40px; + } + + li { + display: flex; + width: 90%; + align-items: center; + justify-content: space-between; + margin: 0px auto; + padding: 10px 0; + position: relative; + overflow: visible; + + .icon { + z-index: 1; + position: relative; + width: 20px; + height: 20px; + fill: var(--light-grey); + background-color: white; + border-radius: 50%; + display: none; + } + + &.correct { + .icon.correct-icon { + fill: var(--green); + display: block; + } + + &::before { + border-color: var(--green); + } + } + + &.wrong { + .icon.wrong-icon { + fill: var(--danger); + display: block; + } + + &::before { + border-color: var(--danger); + } + } + + &.none { + .icon.progress-icon { + fill: var(--light-grey); + display: block; + } + + &::before { + border-color: var(--light-grey); + } + } + + &.current { + .icon.progress-icon { + fill: var(--teal); + animation: ripple 1.5s infinite; + display: block; + } + + &::before { + border-color: var(--teal); + } + } + + &:last-child::before { + display: none; + } + + @keyframes ripple { + 50% { + box-shadow: 0px 0px 1px 10px transparent; + } + 0% { + box-shadow: 0px 0px 1px 0px var(--teal); + } + } + + &::before { + content: ''; + position: absolute; + left: 8px; + top: 50%; + height: 100%; + width: 1px; + border-right: 1px dashed var(--light-grey); + } + + .content-holder { + width: calc(100% - 40px); + display: flex; + padding: 15px 15px; + align-items: center; + box-shadow: 1px 1px 5px var(--light-grey); + border-radius: 7px; + margin-left: auto; + + .content { + flex-grow: 1; + } + + .status { + font-size: 14px; + text-align: right; + margin-left: auto; + } + } + + label { + display: block; + font-size: 14px; + color: var(--dark-grey); + overflow: hidden; + } + + p { + font-size: 12px; + color: var(--light-grey); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } +} diff --git a/src/app/tabs/courses/quiz/quiz.component.ts b/src/app/tabs/courses/quiz/quiz.component.ts index d94467d..8486bac 100644 --- a/src/app/tabs/courses/quiz/quiz.component.ts +++ b/src/app/tabs/courses/quiz/quiz.component.ts @@ -25,6 +25,9 @@ export class QuizComponent implements OnInit { }, }; + quizSegment: string = 'QUESTIONS'; + showQuestionList: boolean = false; + selectedQuestion: any; questionList = [{ @@ -99,6 +102,114 @@ export class QuizComponent implements OnInit { id: 4, text: 'Gambler', }] + }, { + id: 5, + question: 'Who is Newton ?', + userAnswer: 0, + correctAnswer: 3, + options: [{ + id: 1, + text: 'Dancer', + }, { + id: 2, + text: 'Actor', + }, { + id: 3, + text: 'Scientist', + }, { + id: 4, + text: 'Gambler', + }] + }, { + id: 6, + question: 'Who is Newton ?', + userAnswer: 0, + correctAnswer: 3, + options: [{ + id: 1, + text: 'Dancer', + }, { + id: 2, + text: 'Actor', + }, { + id: 3, + text: 'Scientist', + }, { + id: 4, + text: 'Gambler', + }] + }, { + id: 7, + question: 'Who is Newton ?', + userAnswer: 0, + correctAnswer: 3, + options: [{ + id: 1, + text: 'Dancer', + }, { + id: 2, + text: 'Actor', + }, { + id: 3, + text: 'Scientist', + }, { + id: 4, + text: 'Gambler', + }] + }, { + id: 8, + question: 'Who is Newton ?', + userAnswer: 0, + correctAnswer: 3, + options: [{ + id: 1, + text: 'Dancer', + }, { + id: 2, + text: 'Actor', + }, { + id: 3, + text: 'Scientist', + }, { + id: 4, + text: 'Gambler', + }] + }, { + id: 9, + question: 'Who is Newton ?', + userAnswer: 0, + correctAnswer: 3, + options: [{ + id: 1, + text: 'Dancer', + }, { + id: 2, + text: 'Actor', + }, { + id: 3, + text: 'Scientist', + }, { + id: 4, + text: 'Gambler', + }] + }, { + id: 10, + question: 'Who is Newton ?', + userAnswer: 0, + correctAnswer: 3, + options: [{ + id: 1, + text: 'Dancer', + }, { + id: 2, + text: 'Actor', + }, { + id: 3, + text: 'Scientist', + }, { + id: 4, + text: 'Gambler', + }] }]; @@ -112,10 +223,20 @@ export class QuizComponent implements OnInit { } next() { - this.ngxSiemaService.next(1); - this.ngxSiemaService.currentSlide().subscribe((index) => { - this.selectedQuestion = this.questionList[index.currentSlide]; - }).unsubscribe(); + if (this.selectedQuestion.id === this.questionList[this.questionList.length - 1].id) { + this.quizSegment = 'END_PAGE'; + } else { + this.ngxSiemaService.next(1); + this.ngxSiemaService.currentSlide().subscribe((index) => { + this.selectedQuestion = this.questionList[index.currentSlide]; + }).unsubscribe(); + } + } + + goToSlide(index: number) { + this.ngxSiemaService.goTo(index); + this.selectedQuestion = this.questionList[index]; + this.showQuestionList = false; } prev() { diff --git a/src/assets/custom-icons/beaker.svg b/src/assets/custom-icons/beaker.svg new file mode 100644 index 0000000..b2c7a73 --- /dev/null +++ b/src/assets/custom-icons/beaker.svg @@ -0,0 +1 @@ + diff --git a/src/assets/custom-icons/list.svg b/src/assets/custom-icons/list.svg new file mode 100644 index 0000000..548427f --- /dev/null +++ b/src/assets/custom-icons/list.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/xpcoins.svg b/src/assets/custom-icons/xpcoins.svg new file mode 100644 index 0000000..c1a9fe7 --- /dev/null +++ b/src/assets/custom-icons/xpcoins.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +