kj
/
lms-app
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

Quiz UI enhancements

master
kj1352 5 år sedan
förälder
ea3d9e8aa7
incheckning
59f58a40ba
3 ändrade filer med 149 tillägg och 76 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      src/app/calendar/calendar.component.html
  2. +85
    -60
      src/app/tabs/courses/quiz/quiz.component.html
  3. +62
    -14
      src/app/tabs/courses/quiz/quiz.component.scss

+ 2
- 2
src/app/calendar/calendar.component.html Visa fil

@@ -4,8 +4,8 @@
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</button>
<button class="show-all-button" (click)="scrollToBottom()">
<span *ngIf="showAllSchedules"> Show All </span>
<span *ngIf="!showAllSchedules"> Show Today </span>
<span *ngIf="!showAllSchedules"> Show All </span>
<span *ngIf="showAllSchedules"> Show Today </span>
</button>
</header>



+ 85
- 60
src/app/tabs/courses/quiz/quiz.component.html Visa fil

@@ -10,75 +10,100 @@
</header>

<section class="question-status">
<div class="question-number correct">
<span>
<label> 1 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>
<div class="question-number wrong">
<span>
<label> 2 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</span>
</div>
<div class="question-number correct">
<span>
<label> 3 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>
<div class="question-number wrong">
<span>
<label> 4 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</span>
</div>
<div class="question-number correct">
<span>
<label> 5 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>
<div class="question-number wrong">
<span>
<label> 6 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</span>
</div>
<div class="question-number current">
<span>
<label> 7 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>
<div class="container">
<div class="question-number correct">
<span>
<label> 1 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>
<div class="question-number wrong">
<span>
<label> 2 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</span>
</div>
<div class="question-number correct">
<span>
<label> 3 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>
<div class="question-number wrong">
<span>
<label> 4 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</span>
</div>
<div class="question-number correct">
<span>
<label> 5 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>
<div class="question-number wrong">
<span>
<label> 6 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</span>
</div>
<div class="question-number current wrong">
<span>
<label> 7 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</span>
</div>

<div class="question-number">
<span>
<label> 8 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>
<div class="question-number current correct">
<span>
<label> 8 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>

<div class="question-number">
<span>
<label> 9 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>

<div class="question-number">
<span>
<label> 10 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>

<div class="question-number">
<span>
<label> 9 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>

<div class="question-number">
<span>
<label> 10 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
<div class="question-number">
<span>
<label> 11 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>


<div class="question-number">
<span>
<label> 12 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>

<div class="question-number">
<span>
<label> 13 </label>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</span>
</div>
</div>
</section>

<ngx-siema [options]="options">
<ngx-siema-slide>
<p class="question">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto obcaecati perferendis suscipit consequuntur labore voluptatibus vitae totam minima, tempore excepturi, cum at qui voluptas rerum nostrum odio minus, voluptatem dolores. ?
Architecto obcaecati perferendis suscipit consequuntur labore voluptatibus vitae totam minima, tempore excepturi, cum at qui voluptas rerum nostrum odio minus, voluptatem dolores. ?
</p>

<div class="timer-holder">


+ 62
- 14
src/app/tabs/courses/quiz/quiz.component.scss Visa fil

@@ -47,22 +47,54 @@

.question-status {
background-color: var(--ash-black);
padding: 10px 5% 5px;
display: inline-block;
white-space: nowrap;
padding: 10px 0% 5px;
display: block;
width: 100%;
overflow: auto;
margin-bottom: -10px;
position: relative;

.container {
width: 100%;
padding: 0 5%;
white-space: nowrap;
display: inline-block;
overflow: auto;
}

&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 100%;
box-shadow: 10px 0px 10px 10px var(--ash-black);
opacity: 0.8;
background-color: var(--ash-black);
}

&::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 100%;
box-shadow: -10px 0px 10px 10px var(--ash-black);
opacity: 0.8;
background-color: var(--ash-black);
}

.question-number {
width: 20px;
height: 20px;
width: 17px;
height: 17px;
background-color: var(--dark-grey);
color: white;
align-items: center;
justify-content: center;
display: inline-block;
margin-right: 15px;
margin-right: 10px;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--dark-grey);
@@ -87,6 +119,26 @@
display: none;
}

&.current {
border-color: var(--light-grey);
background-color: var(--black);

&.wrong {
background-color: var(--black);
.icon {
fill: var(--danger-dark) !important;
}
}

&.correct {
background-color: var(--green);

.icon {
fill: var(--black) !important;
}
}
}

&.correct {
border-color: var(--green);
background-color: white;
@@ -111,15 +163,11 @@

.icon {
fill: white;
width: 10px;
height: 10px;
width: 7px;
height: 7px;
display: block;
}
}

&.current {
border-color: var(--light-grey);
}
}
}

@@ -127,9 +175,9 @@ ngx-siema-slide {
display: block;

.question {
line-height: 1.6;
line-height: 1.5;
color: white;
font-size: 14px;
font-size: 13px;
background-color: var(--ash-black);
padding: 15px 5%;
}