<div class="main-div knowresult" infinite-scroll [infiniteScrollDistance]="2" [scrollWindow]="false"
    [infiniteScrollThrottle]="0" (scrolled)="onScrollDown()">
    <div class="pre-class">
        <div class="pre-class-left">
            <h2>
                <span>{{ name }}</span>
            </h2>
        </div>
        <div class="radial-wrapper">
            <div class="circle circle-purple">
                <div>
                    <svg viewBox="0 0 40 40" id="total-pros">
                        <circle cx="20" cy="20" r="15.9" stroke-dasharray="100 0" stroke-offset="50"></circle>
                        <circle cx="20" cy="20" r="15.9" [attr.stroke-dasharray]="[correct]"></circle>
                    </svg>
                    <span class="material-icons purple">
                        done
                    </span>
                </div>
                <div>
                    <p>{{ correctper }}%</p>
                    <p>Correct</p>
                </div>
            </div>
            <div class="circle circle-orange">
                <div>
                    <svg viewBox="0 0 40 40" id="total-pros">
                        <circle cx="20" cy="20" r="15.9" stroke-dasharray="100 0" stroke-offset="50"></circle>
                        <circle cx="20" cy="20" r="15.9" [attr.stroke-dasharray]="[incorrect]"></circle>
                    </svg>
                    <span class="material-icons orange">
                        close
                    </span>
                </div>
                <div>
                    <p>{{ incorrectper }}%</p>
                    <p>Incorrect</p>
                </div>
            </div>
            <div class="circle circle-normal">
                <div>
                    <svg viewBox="0 0 40 40" id="total-pros">
                        <circle cx="20" cy="20" r="15.9" stroke-dasharray="100 0" stroke-offset="50"></circle>
                        <circle cx="20" cy="20" r="15.9" [attr.stroke-dasharray]="[DonotKnow]"></circle>
                    </svg>
                    <span class="material-icons normal">
                        question_mark
                    </span>
                </div>
                <div>
                    <p>{{ DonotKnowper }}%</p>
                    <p>Don't Know</p>
                </div>
            </div>
        </div>
    </div>

    <div class="main-resultTab">
        <div class="result-btn">
            <button (click)="showSummary()" [ngClass]="{ activeTab: assSummry }">
                Assessment Summary
            </button>
            <button (click)="showResult()" [ngClass]="{ activeTab: assResult }">
                Assessment Results
            </button>
        </div>
    </div>

    <div class="summary" *ngIf="assSummry">
        <h2 class="summary-title spaced">Assessment Summary</h2>

        <div class="summary-box-wrapper">
            <div class="summary-box" *ngFor="let item of domainreport; let i = index">
                <div class="domain-box">
                    <p>{{ item.Srno }}<span>Domain</span></p>
                </div>
                <div class="progress-box">
                    <h3>{{ item.domain_name }}</h3>
                    <div class="progress-bar">
                        <div class="progress-correct" [ngStyle]="{ 'width.%': item.totalProgressCorrect }"></div>
                        <div class="progress-incorrect" [ngStyle]="{ 'width.%': item.totalProgressIncorrect }">
                        </div>
                    </div>
                </div>
                <div class="progress-percentage">
                    <p class="correct" *ngIf="item.total != 0">
                        {{ item.totalProgressCorrect }}% <span>Correct</span>
                    </p>
                    <p class="incorrect" *ngIf="item.total != 0">
                        {{ item.totalProgressIncorrect }}% <span>Incorrect</span>
                    </p>
                    <p class="dontknow" *ngIf="item.total != 0">
                        {{ item.DonotknowProgress }}% <span>Don't Know</span>
                    </p>
                    <p class="correct" *ngIf="item.total == 0">0% Correct</p>
                    <p class="incorrect" *ngIf="item.total == 0">0% Incorrect</p>
                    <p class="dontknow" *ngIf="item.total == 0">0% Don't Know</p>
                </div>
            </div>
        </div>
    </div>
    <div class="search-results" *ngIf="assResult ">
        <div class="result-wrapper">
            <h2 class="summary-title">Assessment Results</h2>
            <div class="summary-button md-on-dropdown">
                <ul class="sum-btn-wrap">
                    <li class="result-btn sum-btn border_w" [ngClass]="{'active':allQuestion}"
                        (click)="filerResult('all')">
                        <span class="my-3">All Questions</span>
                        <span class="count-number">{{
                            CorrectQue + IncorrectQue + pendding + DonotKnowque
                            }}</span>
                    </li>
                    <li class="correct-result sum-btn border_v" [ngClass]="{'active':correctQuestion}"
                        (click)="filerResult('correct')">
                        <span class="count-round"></span>
                        <span class="my-3">Correct</span>
                        <span class="count-number">{{ CorrectQue }}</span>
                    </li>
                    <li class="incorrect-result sum-btn border_o" [ngClass]="{'active':incorrectQuestion}"
                        (click)="filerResult('incorrect')">
                        <span class="count-round"></span>
                        <span class="my-3">Incorrect</span>
                        <span class="count-number">{{ IncorrectQue }}</span>
                    </li>
                    <li class="no-result sum-btn border_gw" [ngClass]="{'active':dontQuestion}"
                        (click)="filerResult('dont')">
                        <span class="count-round"></span>
                        <span class="my-3">Don't Know</span>
                        <span class="count-number">{{ DonotKnowque }}</span>
                    </li>
                </ul>
            </div>
            <div class="summary-button sm-on-dropdown">
                <ul class="sum-btn-wrap">
                    <li class="result-btn sum-btn border_w" [ngClass]="{'active':allQuestion}"
                        (click)="filerResult('all')">
                        <span class="my-3">All Questions</span>
                        <span class="count-number">{{
                            CorrectQue + IncorrectQue + pendding + DonotKnowque
                            }}</span>
                        <div class="arrowdown-que">
                            <span class="material-icons" (click)="QuestionRWQ()">
                                keyboard_arrow_down
                            </span>
                        </div>
                    </li>
                    <ul id="questionshow" class="sm-click-on">
                        <li class="correct-result sum-btn border_v" [ngClass]="{'active':correctQuestion}"
                            (click)="filerResult('correct')">
                            <span class="count-round"></span>
                            <span class="my-3">Correct</span>
                            <span class="count-number">{{ CorrectQue }}</span>
                        </li>
                        <li class="incorrect-result sum-btn border_o" [ngClass]="{'active':incorrectQuestion}"
                            (click)="filerResult('incorrect')">
                            <span class="count-round"></span>
                            <span class="my-3">Incorrect</span>
                            <span class="count-number">{{ IncorrectQue }}</span>
                        </li>
                        <li class="no-result sum-btn border_gw" [ngClass]="{'active':dontQuestion}"
                            (click)="filerResult('dont')">
                            <span class="count-round"></span>
                            <span class="my-3">Don't Know</span>
                            <span class="count-number">{{ DonotKnowque }}</span>
                        </li>
                    </ul>
                </ul>
            </div>
        </div>
    </div>
    <div class="search-results" *ngIf="assResult ">
        <div class="summary-result-detail" *ngFor="let item of KnowassresultShow | slice: 0:Show; let i = index">
            <div class="tabs">
                <span class="material-icons checked-icon" *ngIf="item.user_ans == item.answer && item.user_ans != '2'">
                    check
                </span>
                <span class="material-icons checked-icon" *ngIf="item.user_ans != item.answer && item.user_ans != '2'">
                    close
                </span>
                <span class="material-icons checked-icon" *ngIf="item.user_ans =='2'">
                    question_mark
                </span>
                <div class="tab"
                    [ngClass]="{'true_color': item.user_ans == item.answer && item.user_ans != '2','false_color': item.user_ans != item.answer && item.user_ans != '2','dontknow_color': item.user_ans =='2'}">

                    <input type="checkbox" (change)="checkboxchange(item)" [checked]="item.check" id="rd{{ i }}"
                        name="rd" />
                    <label class="tab-label" for="rd{{ i }}">
                        <div class="accordion-question">
                            <span>{{ item.sr_no }}.</span>
                            <p>{{ item.question }}</p>
                        </div>
                        <div class="radio-wrapper">
                            <span class="check-round" [ngClass]="{
                                                            active: '0' == item.answer ,
                                                            wrong:
                                                            '0' != item.answer &&
                                                            '0' == item.user_ans &&
                                                            '2' != item.user_ans
                                                        }"></span>
                            <p>True</p>
                            <span class="check-round" [ngClass]="{
                                                            active: '1' == item.answer ,
                                                            wrong:
                                                            '1' != item.answer &&
                                                            '1' == item.user_ans &&
                                                            '2' != item.user_ans
                                                        }"></span>
                            <p>False</p>

                            <span class="check-round" [ngClass]="{ Donknow: '2' == item.user_ans }"></span>
                            <p>Don't know</p>
                        </div>
                    </label>
                </div>
            </div>
        </div>
        <div class="notfound" *ngIf="KnowassresultShow.length <= 0">
            <p>No questions available</p>
        </div>
    </div>
</div>
<ngx-spinner bdColor="#00041aa6" size="default" color="##d7779b"
    template="<img src='../../../assets/images/loading.gif' class='loading-indicator'/>" [fullScreen]="true">
</ngx-spinner>