kj
/
lms-app


			
							<section class="page-container full-bg" color="black" *ngIf="questionList.length > 0">
    <header class="nav-header" shadow="true" *ngIf="quizSegment !== 'END_PAGE'">
        <button class="close-button" (click)="back()">
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
        </button>
        <h5>
            <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>

    <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>
    </div>


    <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>

        <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>
                </div>

                <!-- 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 *ngIf="quizSegment === 'END_PAGE'">
        <section class="end-upfold">
            <div class="end-upfold-container">
                <header class="subject"> <span> Chemistry - Oxidation &amp; Reduction </span> </header>

                <div class="rank-holder">
                    <label> Rank # </label>
                    <span> 8 </span>
                </div>

                <p> You're Excellent, Dwayne!! </p>

                <div class="calculated-progress">
                    <span class="correct" [style.width.%]="getCorrectAnswersCount() * 100 / questionList.length"></span>
                    <span class="wrong" [style.width.%]="getWrongAnswersCount() * 100 / questionList.length"></span>
                    <span class="none" [style.width.%]="getUnAttendedAnswersCount() * 100 / questionList.length"></span>
                </div>
            </div>
        </section>

        <div class="answers-report-container">
            <section class="answers-report">
                <ul>
                    <li class="correct" (click)="reportListState = 'correct'">
                        <div class="content">
                            <label> Correct Answers </label>
                            <div class="count"> {{ getCorrectAnswersCount() }}
                                <span *ngIf="getCorrectAnswersCount() >= 0"> ({{ getCorrectAnswersCount() * 100 / questionList.length }}%) </span>
                            </div>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                        </div>
                    </li>

                    <li class="wrong" (click)="reportListState = 'wrong'">
                        <div class="content">
                            <label> Wrong Answers </label>
                            <div class="count"> {{ getWrongAnswersCount() }}
                                <span *ngIf="getWrongAnswersCount() >= 0"> ({{ getWrongAnswersCount() * 100 / questionList.length }}%) </span>
                            </div>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                        </div>
                    </li>

                    <li class="skipped" (click)="reportListState = 'skipped'">
                        <div class="content">
                            <label> Skipped Answers </label>
                            <div class="count"> {{ getUnAttendedAnswersCount() }}
                                <span *ngIf="getUnAttendedAnswersCount() >= 0"> ({{ getUnAttendedAnswersCount() * 100 / questionList.length }}%) </span>
                            </div>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                        </div>
                    </li>
                </ul>

                <div class="answer-action-buttons">
                    <button> Leaderboard </button>
                    <button (click)="back()"> Back to home </button>
                </div>
            </section>
        </div>


        <section class="quiz-list-slideup" [ngClass]="{'active' : reportListState }">
            <header>
                Question List
                <button class="close-button" (click)="reportListState = ''">
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
                </button>
            </header>
            <ul>
                <li *ngFor="let question of getSortedQuestionList(reportListState);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>

</section>