kj
/
lms-app
1
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

Quiz List UI to mimic calendar UI

master
kj1352 5年前
親
17fbe1252d
コミット
81edd9c355
7個のファイルの変更、738行の追加、55行の削除
分割表示
差分オプション
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード
  1. +1
    -1
      src/app/tabs/courses/course-details/course-details.component.ts
  2. +118
    -48
      src/app/tabs/courses/quiz/quiz.component.html
  3. +300
    -2
      src/app/tabs/courses/quiz/quiz.component.scss
  4. +125
    -4
      src/app/tabs/courses/quiz/quiz.component.ts
  5. +1
    -0
      src/assets/custom-icons/beaker.svg
  6. +71
    -0
      src/assets/custom-icons/list.svg
  7. +122
    -0
      src/assets/custom-icons/xpcoins.svg

+ 1
- 1
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'
}]
}];


+ 118
- 48
src/app/tabs/courses/quiz/quiz.component.html ファイルの表示

@@ -1,4 +1,4 @@
<div class="page" *ngIf="questionList.length > 0">
<section class="page" *ngIf="questionList.length > 0">
<header class="nav-header">
<button class="close-button" (click)="back()">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -7,64 +7,134 @@
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
<span> Quiz </span>
</h5>
<button class="list-button" (click)="showQuestionList = !showQuestionList" *ngIf="quizSegment === 'QUESTIONS'">
<svg-icon *ngIf="!showQuestionList" [applyClass]="true" class="icon" src="assets/custom-icons/list.svg"></svg-icon>
<svg-icon *ngIf="showQuestionList" [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</button>
</header>

<section class="question-status">
<div class="container">
<div class="question-number correct" *ngFor="let question of questionList; let i = index"
[ngClass]="{'current': selectedQuestion && selectedQuestion.id === question.id,
'correct' : question.userAnswer === question.correctAnswer,
'wrong' : question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer}">
<span>
<label> {{ i + 1 }} </label>
<svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
<svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</span>
<div *ngIf="quizSegment === 'START_PAGE'">
<section class="upfold">
<div class="upfold-container">
<figure>
<img src="assets/custom-icons/beaker.svg" alt="">
</figure>

<header>
<img src="assets/custom-icons/xpcoins.svg" alt="">
<h3>
Today's
</h3>
<h2>
Super Quiz
</h2>
</header>
<p> Play super quiz and earn 500 XP </p>
</div>
</section>

<div class="quiz-details-holder">
<section class="quiz-details">
<header>
<p> Today's Quiz is on </p>
<h3> Chemistry - Oxidation &amp; Reduction </h3>
<p>
Time Duration : 15 minutes
</p>
</header>
<p class="people-count">
70 Students have completed
</p>
<button class="play-button" (click)="quizSegment = 'QUESTIONS'">
PLAY QUIZ NOW
</button>
</section>
</div>
</section>
</div>

<ngx-siema [options]="options">
<ngx-siema-slide *ngFor="let question of questionList; let i = index">
<p class="question">
{{ question.question }}
</p>

<div class="timer-holder">
<div class="timer">
<span> 00:60 </span>
<svg width="55" height="55" viewBox="0 0 55 55">
<circle cx="27.5" cy="27.5" r="21.5" fill="none" stroke="#cecece" stroke-width="3" />
<circle cx="27.5" cy="27.5" r="21.5" fill="none" stroke-width="3"
stroke-dasharray="135.2" stroke-dashoffset="52.08" id="progress" />
</svg>
<div *ngIf="quizSegment === 'QUESTIONS'">
<section class="question-status">
<div class="container">
<div class="question-number correct" *ngFor="let question of questionList; let i = index"
[ngClass]="{'current': selectedQuestion && selectedQuestion.id === question.id,
'correct' : question.userAnswer === question.correctAnswer,
'wrong' : question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer}">
<span>
<label> {{ i + 1 }} </label>
<svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
<svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</span>
</div>
</div>
</section>

<!-- 135.2 * (1 - 0.6) -->
<ngx-siema [options]="options">
<ngx-siema-slide *ngFor="let question of questionList; let i = index">
<p class="question">
{{ question.question }}
</p>

<ol class="option-list">
<li *ngFor="let option of question.options; let j = index"
[ngClass]="{'correct' : question.userAnswer === question.correctAnswer && question.userAnswer === option.id,
'wrong': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.userAnswer === option.id,
'show-correct': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.correctAnswer === option.id }"
(click)="question.userAnswer = option.id; isAnswerWrong(question.correctAnswer, question.userAnswer)">
<label> {{ j + 1 }}. {{ option.text }} </label>
<div class="icon-holder">
<svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
<svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="timer-holder">
<div class="timer">
<span> 00:60 </span>
<svg width="55" height="55" viewBox="0 0 55 55">
<circle cx="27.5" cy="27.5" r="21.5" fill="none" stroke="#cecece" stroke-width="3" />
<circle cx="27.5" cy="27.5" r="21.5" fill="none" stroke-width="3"
stroke-dasharray="135.2" stroke-dashoffset="52.08" id="progress" />
</svg>
</div>
</li>
</ol>
</ngx-siema-slide>
</ngx-siema>
</div>

<div class="action-buttons">
<button class="prev-button" *ngIf="selectedQuestion.id !== questionList[0].id" (click)="prev()"> Previous </button>
<button class="next-button" (click)="next()">
<span *ngIf="selectedQuestion.userAnswer !== 0"> Next </span>
<span *ngIf="selectedQuestion.userAnswer === 0"> Skip </span>
</button>
<!-- 135.2 * (1 - 0.6) -->

<ol class="option-list">
<li *ngFor="let option of question.options; let j = index"
[ngClass]="{'correct' : question.userAnswer === question.correctAnswer && question.userAnswer === option.id,
'wrong': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.userAnswer === option.id,
'show-correct': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.correctAnswer === option.id }"
(click)="question.userAnswer = option.id; isAnswerWrong(question.correctAnswer, question.userAnswer)">
<label> {{ j + 1 }}. {{ option.text }} </label>
<div class="icon-holder">
<svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
<svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</div>
</li>
</ol>
</ngx-siema-slide>
</ngx-siema>

<div class="action-buttons">
<button class="prev-button" *ngIf="selectedQuestion.id !== questionList[0].id" (click)="prev()"> Previous </button>
<button class="next-button" [ngClass]="{'skip' : selectedQuestion.userAnswer === 0 }" (click)="next()">
<span *ngIf="selectedQuestion.userAnswer !== 0"> Next </span>
<span *ngIf="selectedQuestion.userAnswer === 0"> Skip </span>
</button>
</div>



<section class="quiz-list-slideup" [ngClass]="{'active' : showQuestionList }">
<header> Question List </header>
<ul>
<li *ngFor="let question of questionList;let i = index"
[ngClass]="{'current': selectedQuestion && selectedQuestion.id === question.id && selectedQuestion.userAnswer === 0,
'correct' : question.userAnswer === question.correctAnswer,
'wrong' : question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer,
'none' : question.userAnswer === 0}">
<svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
<svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
<svg-icon [applyClass]="true" class="icon progress-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
<div class="content-holder" (click)="goToSlide(i)">
<section class="content">
<label>
{{ i + 1 }}. {{ question.question }}
</label>
</section>
</div>
</li>
</ul>
</section>
</div>

</div>
</section>

+ 300
- 2
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;
}
}
}

+ 125
- 4
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() {


+ 1
- 0
src/assets/custom-icons/beaker.svg ファイルの表示

@@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="74.981" x2="437.019" y1="74.981" y2="437.019"><stop offset="0" stop-color="#54747f"/><stop offset="1" stop-color="#455e72"/></linearGradient><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="166.536" x2="343.43" y1="111.382" y2="288.275"><stop offset="0" stop-color="#e9f2f2"/><stop offset="1" stop-color="#d5e5e5"/></linearGradient><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="167.621" x2="343.318" y1="290.369" y2="466.066"><stop offset="0" stop-color="#94e5cf"/><stop offset="1" stop-color="#5a9898"/></linearGradient><g><circle cx="256" cy="256" fill="url(#SVGID_1_)" r="256"/><g><path d="m341.792 289.913s-28.79 5.642-46.882 5.642c-21.593 0-42.408 10.31-43.185 10.699-.195.195-17.703 8.754-34.627 8.754s-34.432-8.559-34.627-8.754l-7.586-23.149 32.486-48.827v-124.825h-19.453v-19.453h136.172v19.453h-19.453v124.824z" fill="url(#SVGID_2_)"/><path d="m401.125 406.438c-5.058 9.532-14.979 15.562-25.873 15.562h-238.495c-10.894 0-20.815-6.03-25.873-15.562s-4.28-21.009 1.751-29.763l51.356-77.424h.195l10.699-16.146 7.587 3.696c.195.194 17.702 8.754 34.627 8.754s34.432-8.559 34.627-8.754c.259-.13 2.691-1.336 6.614-2.898 7.976-3.171 22.099-7.801 36.572-7.801 23.078 0 46.882 13.812 46.882 13.812 2.133 3.151-2.244-3.482 18.87 28.402l38.906 58.359c5.835 8.753 6.613 20.23 1.555 29.763z" fill="url(#SVGID_3_)"/><g id="Medical_Lab_1_"><g><path d="m285.184 324.734h19.453v19.453h-19.453z" fill="#5a9898"/></g><g><path d="m246.278 363.641h19.453v19.453h-19.453z" fill="#7ccbbf"/></g><g><path d="m207.372 344.188h19.453v19.453h-19.453z" fill="#7ccbbf"/></g><g><path d="m246.278 246.922h19.453v19.453h-19.453z" fill="#7ccbbf"/></g></g></g></g></svg>

+ 71
- 0
src/assets/custom-icons/list.svg ファイルの表示

@@ -0,0 +1,71 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 343.5 343.5" style="enable-background:new 0 0 343.5 343.5;" xml:space="preserve">
<g>
<g>
<path d="M322.05,161.8h-182.6c-5.5,0-10,4.5-10,10s4.5,10,10,10h182.6c5.5,0,10-4.5,10-10C332.05,166.3,327.65,161.8,322.05,161.8
z"/>
</g>
</g>
<g>
<g>
<path d="M57.95,125.3c-25.7,0-46.5,20.8-46.5,46.5s20.8,46.5,46.5,46.5s46.5-20.8,46.5-46.5S83.65,125.3,57.95,125.3z
M57.95,198.3c-14.7,0-26.5-11.9-26.5-26.5c0-14.7,11.9-26.5,26.5-26.5c14.6,0,26.5,11.9,26.5,26.5S72.55,198.3,57.95,198.3z"/>
</g>
</g>
<g>
<g>
<path d="M322.05,36.8h-182.6c-5.5,0-10,4.5-10,10s4.5,10,10,10h182.6c5.5,0,10-4.5,10-10C332.05,41.3,327.65,36.8,322.05,36.8z"/>
</g>
</g>
<g>
<g>
<path d="M57.95,0c-25.7,0-46.5,20.8-46.5,46.5c0,25.7,20.8,46.5,46.5,46.5s46.5-20.8,46.5-46.5C104.45,20.9,83.65,0.1,57.95,0z
M57.95,73.1c-14.7,0-26.5-11.9-26.5-26.5c0-14.6,11.9-26.5,26.5-26.5c14.7,0,26.5,11.9,26.5,26.5
C84.45,61.2,72.55,73.1,57.95,73.1z"/>
</g>
</g>
<g>
<g>
<path d="M322.05,286.8h-182.6c-5.5,0-10,4.5-10,10s4.5,10,10,10h182.6c5.5,0,10-4.5,10-10S327.65,286.8,322.05,286.8z"/>
</g>
</g>
<g>
<g>
<path d="M57.95,250.5c-25.7,0-46.5,20.8-46.5,46.5c0,25.7,20.8,46.5,46.5,46.5s46.5-20.8,46.5-46.5
C104.45,271.4,83.65,250.5,57.95,250.5z M57.95,323.6c-14.7,0-26.5-11.9-26.5-26.5c0-14.7,11.9-26.5,26.5-26.5
c14.7,0,26.5,11.9,26.5,26.5S72.55,323.6,57.95,323.6z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 122
- 0
src/assets/custom-icons/xpcoins.svg ファイルの表示

@@ -0,0 +1,122 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 58.007 58.007" style="enable-background:new 0 0 58.007 58.007;" xml:space="preserve">
<g id="XMLID_22_">
<path id="XMLID_143_" style="fill:#FCC62D;" d="M52.003,29.211v1.238c0,6.932-11.641,12.551-26,12.551
c-7.926,0-15.019-1.714-19.788-4.414C7.823,44.831,18.751,50,32.003,50c14.359,0,26-6.068,26-13
C58.003,33.952,55.747,31.266,52.003,29.211"/>
<path id="XMLID_142_" style="fill:#E4AF18;" d="M32.003,50c-14.359,0-26-6.068-26-13v8.448c0,6.932,11.641,12.552,26,12.552
s26-5.62,26-12.552V37C58.003,43.932,46.362,50,32.003,50"/>
<path id="XMLID_141_" style="fill:#CE9912;" d="M9.003,51.349c0.59,0.539,1.259,1.055,2,1.545v-8.291
c-0.741-0.51-1.41-1.045-2-1.603V51.349z"/>
<path id="XMLID_140_" style="fill:#CE9912;" d="M53.003,44.603v8.291c0.741-0.489,1.41-1.006,2-1.545V43
C54.414,43.558,53.745,44.093,53.003,44.603"/>
<path id="XMLID_139_" style="fill:#CE9912;" d="M13.003,54.06c0.632,0.327,1.3,0.636,2,0.929v-8.193
c-0.7-0.308-1.368-0.633-2-0.975V54.06z"/>
<path id="XMLID_138_" style="fill:#CE9912;" d="M49.003,54.988c0.7-0.292,1.368-0.602,2-0.929V45.82
c-0.632,0.342-1.3,0.668-2,0.975V54.988z"/>
<path id="XMLID_137_" style="fill:#CE9912;" d="M17.003,55.745c0.646,0.221,1.313,0.427,2,0.619V48.25
c-0.687-0.204-1.354-0.423-2-0.656V55.745z"/>
<path id="XMLID_136_" style="fill:#CE9912;" d="M45.003,56.364c0.687-0.192,1.354-0.398,2-0.619v-8.151
c-0.646,0.233-1.313,0.452-2,0.656V56.364z"/>
<path id="XMLID_135_" style="fill:#CE9912;" d="M22.003,57.084c0.653,0.132,1.321,0.25,2,0.355v-8.044
c-0.679-0.113-1.347-0.239-2-0.379V57.084z"/>
<path id="XMLID_134_" style="fill:#CE9912;" d="M40.003,57.439c0.679-0.106,1.347-0.224,2-0.355v-8.069
c-0.653,0.14-1.321,0.266-2,0.38V57.439z"/>
<path id="XMLID_133_" style="fill:#CE9912;" d="M28.003,57.899c0.658,0.049,1.326,0.083,2,0.107v-8.003
c-0.674-0.026-1.342-0.062-2-0.115V57.899z"/>
<path id="XMLID_132_" style="fill:#CE9912;" d="M34.003,58.007c0.674-0.025,1.342-0.058,2-0.107v-8.012
c-0.658,0.053-1.326,0.089-2,0.116V58.007z"/>
<path id="XMLID_131_" style="fill:#E4AF18;" d="M26.003,34.993c-14.359,0-26-6.068-26-13v8.448c0,6.932,11.641,12.552,26,12.552
s26-5.62,26-12.552v-8.448C52.003,28.925,40.362,34.993,26.003,34.993"/>
<path id="XMLID_130_" style="fill:#CE9912;" d="M3.003,36.342c0.59,0.539,1.259,1.055,2,1.545v-8.291
c-0.741-0.51-1.41-1.045-2-1.602V36.342z"/>
<path id="XMLID_129_" style="fill:#CE9912;" d="M47.003,29.596v8.291c0.741-0.489,1.41-1.006,2-1.545v-8.349
C48.414,28.551,47.745,29.086,47.003,29.596"/>
<path id="XMLID_128_" style="fill:#CE9912;" d="M7.003,39.053c0.632,0.327,1.3,0.636,2,0.929v-8.193
c-0.7-0.308-1.368-0.633-2-0.975V39.053z"/>
<path id="XMLID_127_" style="fill:#CE9912;" d="M43.003,39.981c0.7-0.292,1.368-0.601,2-0.929v-8.239
c-0.632,0.342-1.3,0.668-2,0.975V39.981z"/>
<path id="XMLID_126_" style="fill:#CE9912;" d="M11.003,40.738c0.646,0.221,1.313,0.427,2,0.619v-8.114
c-0.687-0.204-1.354-0.423-2-0.656V40.738z"/>
<path id="XMLID_125_" style="fill:#CE9912;" d="M39.003,41.357c0.687-0.192,1.354-0.398,2-0.619v-8.151
c-0.646,0.233-1.313,0.452-2,0.656V41.357z"/>
<path id="XMLID_124_" style="fill:#CE9912;" d="M16.003,42.077c0.653,0.132,1.321,0.25,2,0.355v-8.044
c-0.679-0.113-1.347-0.239-2-0.379V42.077z"/>
<path id="XMLID_123_" style="fill:#CE9912;" d="M34.003,42.433c0.679-0.106,1.347-0.224,2-0.355v-8.069
c-0.653,0.14-1.321,0.266-2,0.38V42.433z"/>
<path id="XMLID_122_" style="fill:#CE9912;" d="M22.003,42.893c0.658,0.049,1.326,0.083,2,0.107v-8.003
c-0.674-0.026-1.342-0.062-2-0.115V42.893z"/>
<path id="XMLID_121_" style="fill:#CE9912;" d="M28.003,43c0.674-0.025,1.342-0.058,2-0.107v-8.012
c-0.658,0.053-1.326,0.089-2,0.116V43z"/>
<path id="XMLID_120_" style="fill:#FFD949;" d="M51.32,33.302C48.643,38.858,38.329,43,26.003,43c-4.604,0-8.926-0.58-12.677-1.593
c3.628,2.463,10.085,4.559,18.677,4.559c13.682,0,22-5.311,22-8.966C54.003,35.78,53.064,34.486,51.32,33.302"/>
<path id="XMLID_119_" style="fill:#FFD949;" d="M31.003,33c-14.359,0-26-5.62-26-12.552v-5.652c-3.141,1.969-5,4.438-5,7.204
c0,6.932,11.641,13,26,13c6.914,0,13.192-1.409,17.849-3.642C40.061,32.401,35.678,33,31.003,33"/>
<path id="XMLID_118_" style="fill:#E4AF18;" d="M31.003,24.993c-14.359,0-26-6.068-26-13v8.448c0,6.932,11.641,12.552,26,12.552
c14.359,0,26-5.62,26-12.552v-8.448C57.003,18.925,45.362,24.993,31.003,24.993"/>
<path id="XMLID_117_" style="fill:#CE9912;" d="M8.003,26.342c0.59,0.539,1.259,1.055,2,1.545v-8.291
c-0.741-0.51-1.41-1.045-2-1.602V26.342z"/>
<path id="XMLID_116_" style="fill:#CE9912;" d="M52.003,19.596v8.291c0.741-0.489,1.41-1.006,2-1.545v-8.349
C53.414,18.551,52.745,19.086,52.003,19.596"/>
<path id="XMLID_115_" style="fill:#CE9912;" d="M12.003,29.053c0.632,0.327,1.3,0.636,2,0.929v-8.193
c-0.7-0.308-1.368-0.633-2-0.975V29.053z"/>
<path id="XMLID_114_" style="fill:#CE9912;" d="M48.003,29.981c0.7-0.292,1.368-0.601,2-0.929v-8.239
c-0.632,0.342-1.3,0.668-2,0.975V29.981z"/>
<path id="XMLID_113_" style="fill:#CE9912;" d="M16.003,30.738c0.646,0.221,1.313,0.427,2,0.619v-8.114
c-0.687-0.204-1.354-0.423-2-0.656V30.738z"/>
<path id="XMLID_112_" style="fill:#CE9912;" d="M44.003,31.357c0.687-0.192,1.354-0.398,2-0.619v-8.151
c-0.646,0.233-1.313,0.452-2,0.656V31.357z"/>
<path id="XMLID_111_" style="fill:#CE9912;" d="M21.003,32.077c0.653,0.132,1.321,0.25,2,0.355v-8.044
c-0.679-0.113-1.347-0.239-2-0.379V32.077z"/>
<path id="XMLID_110_" style="fill:#CE9912;" d="M39.003,32.433c0.679-0.106,1.347-0.224,2-0.355v-8.069
c-0.653,0.14-1.321,0.266-2,0.38V32.433z"/>
<path id="XMLID_109_" style="fill:#CE9912;" d="M27.003,32.893c0.658,0.049,1.326,0.083,2,0.107v-8.003
c-0.674-0.026-1.342-0.062-2-0.115V32.893z"/>
<path id="XMLID_108_" style="fill:#CE9912;" d="M33.003,33c0.674-0.025,1.342-0.058,2-0.107v-8.012
c-0.658,0.053-1.326,0.089-2,0.116V33z"/>
<path id="XMLID_107_" style="fill:#FCC62D;" d="M57.003,12c0,6.932-11.641,13-26,13c-14.359,0-26-6.068-26-13
c0-6.932,11.641-12,26-12C45.362,0,57.003,5.068,57.003,12"/>
<path id="XMLID_106_" style="fill:#FFD949;" d="M31.003,20.966c-13.682,0-22-5.31-22-8.966c0-3.655,8.318-9,22-9
c13.682,0,22,5.345,22,9C53.003,15.656,44.685,20.966,31.003,20.966"/>
<path id="XMLID_105_" style="fill:#F0C41B;" d="M37.784,13.359c0.82-0.174,1.301-0.68,1.124-1.257l-0.19-0.616
c-0.139-0.453-0.68-0.831-1.343-1.019c-0.902-1.927-3.202-2.625-6.618-2.625c-0.162,0-0.32,0.004-0.476,0.01
c-1.166,0.048-2.329-0.064-3.236-0.396c-0.37-0.135-0.671-0.276-0.87-0.423c-0.09-0.066-0.308-0.024-0.308,0.06
c0,0.146,0.011,0.319,0.043,0.511c0.124,0.747-0.024,0.635-0.762,1.38c-0.428,0.434-0.769,0.934-1.016,1.486
c-0.659,0.189-1.197,0.566-1.336,1.017l-0.19,0.616c-0.177,0.577,0.304,1.083,1.124,1.257c0.234,1.476,1.237,2.772,3.424,3.486
l-0.12,1.037c-0.032,0.277-0.271,0.533-0.619,0.659l-4.411,1.592C24.58,20.674,27.516,21,30.757,21
c3.196,0,6.095-0.317,8.645-0.842l-4.315-1.613c-0.341-0.128-0.575-0.382-0.606-0.654l-0.121-1.045
C36.547,16.132,37.55,14.835,37.784,13.359"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>