<div class="pagemain" infinite-scroll [infiniteScrollDistance]="2" [scrollWindow]="false" [infiniteScrollThrottle]="0"
    (scrolled)="onScrollDown()">
    <div class="pre-class">
        <div class="pre-class-left">
            <h2>
                Practice Test <span>{{ name }}</span> Summary
            </h2>
        </div>
        <div class="radial-wrapper">
            <div class="circle circle-purple">
                <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]="[correctper, 100 - correctper]"></circle>
                </svg>
                <span class="material-icons purple">
                    done
                </span>
                <p>{{ correctper }}% <span>Correct</span></p>
            </div>
            <div class="circle circle-orange">
                <svg viewBox="0 0 40 40" id="incorrect">
                    <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]="[incorrectper, 100 - incorrectper]">
                    </circle>
                </svg>
                <span class="material-icons orange">
                    close
                </span>
                <p>{{ incorrectper }}% <span>Incorrect</span></p>
            </div>
        </div>
    </div>

    <div class="summary">
        <div class="summary-box-wrapper">
            <div class="summary-box" *ngFor="let item of DomainReport; let i = index">
                <div class="domain-box">
                    <div class="md-device">
                        <p><span>Domain</span>{{ i + 1 }}</p>
                    </div>
                    <div class="sm-device">
                        <p>{{ i + 1 }}<span>Domain</span></p>
                    </div>
                </div>
                <div class="domain-name">
                    <div class="progress-box">
                        <h3>{{ item.domain_name }}</h3>
                    </div>
                    <div class="progress-percentage">
                        <div class="progress-bar">
                            <div class="progress-correct" [ngStyle]="{ 'width.%': item.CorrectPer }"></div>
                            <div class="progress-incorrect" [ngStyle]="{ 'width.%': item.InCorrectPer }"></div>
                        </div>
                        <p class="rank">{{ item.CorrectPer + item.InCorrectPer }} %</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="result-wrapper">
            <h2 class="summary-title">Test 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">{{ total }}</span>
                    </li>
                    <li class="correct-result sum-btn border_v" [ngClass]="{'active':correctQuestion}"
                        (click)="filerResult('correct')">
                        <span class="count-round">
                            <span class="material-icons">
                                check
                            </span>

                        </span>
                        <span class="my-3">Correct</span>
                        <span class="count-number">{{ correct }}</span>
                    </li>
                    <li class="incorrect-result sum-btn border_o" [ngClass]="{'active':incorrectQuestion}"
                        (click)="filerResult('incorrect')">
                        <span class="count-round">
                            <span class="material-icons">
                                close
                            </span>
                        </span>
                        <span class="my-3">Incorrect</span>
                        <span class="count-number">{{ incorrect }}</span>
                    </li>
                    <li class="incorrect-result sum-btn" *ngIf="type=='LINEAR'" [ngClass]="{'active':MarkQuestion}"
                        (click)="filerResult('Mark')">

                        <span class="my-3">Review</span>
                        <span class="count-number">{{ Mark }}</span>
                    </li>
                    <li class="incorrect-result sum-btn" *ngIf="type=='LINEAR'" [ngClass]="{'active':PenddingQuestion}"
                        (click)="filerResult('Pending')">
                        <span class="my-3">Pending</span>
                        <span class="count-number">{{ pending }}</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">{{ total }}</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 class="material-icons">
                                    check
                                </span>
                            </span>
                            <span class="my-3">Correct</span>
                            <span class="count-number">{{ correct }}</span>
                        </li>
                        <li class="incorrect-result sum-btn border_o" [ngClass]="{'active':incorrectQuestion}"
                            (click)="filerResult('incorrect')">
                            <span class="count-round">
                                <span class="material-icons">
                                    close
                                </span>
                            </span>
                            <span class="my-3">Incorrect</span>
                            <span class="count-number">{{ incorrect }}</span>
                        </li>
                        <li class="incorrect-result sum-btn" *ngIf="type=='LINEAR'" [ngClass]="{'active':MarkQuestion}"
                            (click)="filerResult('Mark')">

                            <span class="my-3">Review</span>
                            <span class="count-number">{{ Mark }}</span>
                        </li>
                        <li class="incorrect-result sum-btn" *ngIf="type=='LINEAR'"
                            [ngClass]="{'active':PenddingQuestion}" (click)="filerResult('Pending')">
                            <span class="my-3">Pending</span>
                            <span class="count-number">{{ pending }}</span>
                        </li>
                    </ul>
                </ul>
            </div>
        </div>
    </div>
    <div class="summary-result-detail" *ngIf="PracticeQuestionlist.length > 0">
        <div class="search-results">
            <div class=" tabs" *ngFor="let items of PracticeQuestionlist | slice: 0:Show;let i = index">
                <span class="material-icons checked-icon"
                    *ngIf="items.user_ans == items.answer &&  items.answered == '1'">
                    check
                </span>
                <span class="material-icons checked-icon"
                    *ngIf="items.user_ans != items.answer &&  items.answered == '1'">
                    close
                </span>
                <div class="tab"
                    [ngClass]="{'wronge-border' : items.user_ans != items.answer &&  items.answered == '1','correct-border' : items.user_ans == items.answer &&  items.answered == '1'}">
                    <div class="tab-title">
                        <div class="accordion-content">
                            <div class="que-title">
                                <h5>
                                    Question <span>{{items.sr_no}}</span>
                                </h5>
                                <p>{{ items.title }}</p>
                            </div>
                            <ul class="treeview">
                                <li>
                                    <span class="check-round"
                                        [ngClass]="{
                      active: '1' == items.answer &&  items.answered == '1' ,wrong: '1' != items.answer && '1' == items.user_ans &&  items.answered == '1'}"></span>
                                    <p>{{ items.first_choice }}</p>
                                </li>
                                <li>
                                    <span class="check-round" [ngClass]="{
                      active: '2' == items.answer &&  items.answered == '1',
                      wrong: '2' != items.answer && '2' == items.user_ans &&  items.answered == '1'
                    }"></span>
                                    <p>{{ items.second_choice }}</p>
                                </li>
                                <li>
                                    <span class="check-round" [ngClass]="{
                      active: '3' == items.answer &&  items.answered == '1',
                      wrong: '3' != items.answer && '3' == items.user_ans &&  items.answered == '1'
                    }"></span>
                                    <p>{{ items.third_choice }}</p>
                                </li>
                                <li>
                                    <span class="check-round" [ngClass]="{
                      active: '4' == items.answer &&  items.answered == '1',
                      wrong: '4' != items.answer && '4' == items.user_ans &&  items.answered == '1'
                    }"></span>
                                    <p>{{ items.fourth_choice }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <input type="checkbox" id="rd{{ i + 1 }}" name="rd" (change)="checkboxchange(items)"
                        [checked]="items.check" />
                    <label class="tab-label" for="rd{{ i + 1 }}">
                        <div class="accordion-question">
                            <p>{{ items.Topic[0]?items.Topic[0].sr_number:items.SubDomains[0].domain_number }} : {{
                                items.Topic[0]?items.Topic[0].topic_name:items.SubDomains[0].subdomain_name }}</p>
                        </div>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="notfound" *ngIf="PracticeQuestionlist.length <= 0">
        <p>No questions available</p>
    </div>
</div>
<ngx-spinner bdColor="#00041aa6" size="default" color="##d7779b"
    template="<img src='../../../assets/images/loading.gif' class='loading-indicator'/>" [fullScreen]="true">
</ngx-spinner>