unserver-unify/src/app/mystudy/examsresult.html

<div class="panel panel-body tst_asnt exam_result" ng-controller="ExamResultCtrl as ctrl">
  <div class="show_print">
    <img ng-src="{{ ctrl.logoUrl }}" style="width:20%" />
    <h2 class="text-right" style="width:60%; float: right;">
      {{ ctrl.title||'Exam Result' }}
    </h2>
    <div class="clearfix">
    </div>
    <div class="score_result text-right" style="width:60%; float: right;">
      {{ 'Your Score' | translate }}: {{ ctrl.score }} / {{ 'Total Score' | translate }}: {{ ctrl.totalscore }}
    </div>
    <div class="clearfix">
    </div>
    <hr>
  </div>
  <div class="exam_title hide_print">
    <h2 translate="">
      {{ ctrl.title||'Exam Result' }}
    </h2>
    <div class="score_result">
      {{ 'Your Score' | translate }}: {{ ctrl.score }} / {{ 'Total Score' | translate }}: {{ ctrl.totalscore }}
    </div>
  </div>
  <div class="result_summary">
    <button class="btn btn-primary pull-left btn-sm hide_print" ng-click="ctrl.print()" style="position: relative; top:-6px;">
      <i class="fa fa-print">
      </i>
      {{ 'Print' | translate }}
    </button>
    <b>
    </b> {{ 'Quick Summary' | translate }}:
    <b>
      {{ 'Total Question' | translate }}:
    </b> {{ ctrl.part.length || 0 }} |
    <b>
      {{ 'Correct' | translate }}:
    </b> {{ ctrl.correct }} |
    <b>
      {{ 'Wrong' | translate }}:
    </b> {{ ctrl.wrong }} |
    <b>
      {{ 'Not Attempted' | translate }}:
    </b> {{ ctrl.miss }}
  </div>
  <div class="clearfix"></div>
  <div class="comment_box margin-top-10 margin-bottom-10" ng-if="ctrl.comments">
    <span>
      {{ctrl.comments}}
    </span>
    <div class="clearfix">
    </div>
    <span class="cmnt_author" ng-if="ctrl.commentAuthor">
      - {{ctrl.commentAuthor}}
    </span>
    <div class="clearfix">
    </div>
  </div>
  <div class="clearfix"></div>
  <ul class="nav nav-justified nav-tabs">
    <li ng-class="{'active':ctrl.activetab=='individual'}">
      <a ng-click="ctrl.activetab='individual'">
        {{ 'My Exam Result' | translate }}
      </a>
    </li>
    <li ng-class="{'active':ctrl.activetab=='detailsByQuestion'}" ng-if="ctrl.reportFlag">
      <a ng-click="ctrl.activetab='detailsByQuestion'">
        {{ 'Detailed by Questions' | translate }}
      </a>
    </li>
    <li ng-class="{'active':ctrl.activetab=='knowledgeSummary'}" ng-if="ctrl.showknowledge">
      <a ng-click="ctrl.activetab='knowledgeSummary'">
        {{ 'Knowledge Summary' | translate }}
      </a>
    </li>
  </ul>
  <div class="ibox-content altr_tabs">
    <div class="tab-content">
      <div ng-if="ctrl.activetab=='individual'" style="padding-top:25px;">
        <!-- Question starts -->
        <div ng-repeat="item in ctrl.part">
          <div class="qstn">
            <div class="qstn_index" ng-if="item.q.type!='mquestion'" ng-init="singleDropTarget=true;multiTargetList=true">
              Q{{ item.q._index }}. 
            </div>
            <div class="qstn_typ" translate="">
              {{ ctrl.typename[item.q.type] }}
            </div>
            <div class="qstn_pnt" ng-if="item.q.type!='mquestion'">
              <div ng-class="{'missedpnt':!item.r.userAnswer&&!item.r.iscore,'correctpnt':item.r.flag,'wrongpnt':(item.r.userAnswer&&!item.r.flag&&!item.r.iscore)}" ng-if="item.q.type != 'short'">
                <span ng-if="item.r.iscore">
                  {{ item.r.iscore }} /
                </span> ({{ item.r.score }} {{ item.r.score>1 ? 'Points' : 'Point' | translate }})
              </div>
              <div ng-class="{'missedpnt':!item.r.userAnswer,'correctpnt':item.r.teacherScore}" ng-if="item.q.type == 'short'">
                <span ng-if="item.r.teacherScore">( {{item.r.teacherScore}} )</span>
                <span ng-if="!item.r.teacherScore">( {{'Max Point'|translate}}: {{item.r.score}} )</span>
              </div>
            </div>
            <div class="tag-box tag-box-v2 adjust in_left">              
              <div bind-html-compile="item.q.content" class="lead" ng-if="item.q.type!='sDD'&&item.q.type!='mDD'">
              </div>
              <div class="clearfix">
              </div>
              <div bind-html-compile="getTrustAsHtml(item.q.content)" ng-if="item.q.type=='sDD'||item.q.type=='mDD'">
              </div>
            </div>
          </div>
          <div class="anwer_text" ng-if="item.q.type!='mquestion' && item.q.type!='info'">
            {{ 'Answer' | translate }}:
            <span ng-switch="item.q.type">
              <span ng-switch-when="single">
                <label class="missedQuestion" ng-if="!item.r.userAnswer" translate="">
                  Not Attempted 
                </label>
                <label class="correctQuestion" ng-if="item.r.flag" translate="">
                  Correct
                </label>
                <label class="wrongQuestion" ng-if="item.r.userAnswer&&!item.r.flag" translate="">
                  Wrong
                </label>
              </span>
            <span ng-switch-when="multiple">
                <label class="missedQuestion" ng-if="!item.r.userAnswer" translate="">
                  Not Attempted
                </label>
                <label class="correctQuestion" ng-if="item.r.flag" translate="">
                  Correct
                </label>
                <label class="wrongQuestion" ng-if="item.r.userAnswer&&!item.r.flag" translate="">
                  Wrong
                </label>
              </span>
            <span ng-switch-when="mfill">
                <label class="missedQuestion" ng-if="!item.r.userAnswer" translate="">
                  Not Attempted
                </label>
                <label class="correctQuestion" ng-if="item.r.flag" translate="">
                  Correct
                </label>
                <label class="wrongQuestion" ng-if="item.r.userAnswer&&!item.r.flag" translate="">
                  Wrong
                </label>
              </span>
            <span ng-switch-when="tof">
                <label class="missedQuestion" ng-if="!item.r.userAnswer" translate="">
                  Not Attempted
                </label>
                <label class="correctQuestion" ng-if="item.r.flag" translate="">
                  Correct
                </label>
                <label class="wrongQuestion" ng-if="item.r.userAnswer&&!item.r.flag" translate="">
                  Wrong
                </label>
              </span>
            <span ng-switch-when="short">
                <label ng-class="{correctQuestion: item.r.teacherScore, missedQuestion: !item.r.teacherScore}" translate="">
                  {{ item.r.teacherScore ? 'Reviewed by Teacher' : 'Need to Review by Teacher' }}
                </label>
              </span>
            <span ng-switch-when="typing">
                <label class="missedQuestion" ng-if="!item.r.userAnswer" translate="">
                  Not Attempted
                </label>
                <label class="correctQuestion" ng-if="item.r.flag" translate="">
                  Correct
                </label>
                <label class="wrongQuestion" ng-if="item.r.userAnswer&&!item.r.flag" translate="">
                  Wrong
                </label>
              </span>
              <span ng-switch-when="sDD">
                <label class="missedQuestion" ng-if="!item.r.userAnswer" translate="">
                  Not Attempted
                </label>
                <label class="correctQuestion" ng-if="item.r.flag" translate="">
                  Correct
                </label>
                <label class="wrongQuestion" ng-if="item.r.userAnswer&&!item.r.flag" translate="">
                  Wrong
                </label>
              </span>
              <span ng-switch-when="mDD">
                <label class="missedQuestion" ng-if="!item.r.userAnswer" translate="">
                  Not Attempted
                </label>
                <label class="correctQuestion" ng-if="item.r.flag" translate="">
                  Correct
                </label>
                <label class="wrongQuestion" ng-if="item.r.userAnswer&&!item.r.flag" translate="">
                  Wrong
                </label>
              </span>
              <span ng-switch-when="order">
                <label class="missedQuestion" ng-if="!item.r.userAnswer" translate="">
                  Not Attempted
                </label>
                <label class="correctQuestion" ng-if="item.r.flag" translate="">
                  Correct
                </label>
                <label class="wrongQuestion" ng-if="item.r.userAnswer&&!item.r.flag" translate="">
                  Wrong
                </label>
              </span>
            </span>
          </div>
          <div ng-switch="item.q.type">

            <ul class="ansrs" ng-switch-when="single">
              <li class="correct_select" ng-class="{'missed_one': !item.r.userAnswer||!item.r.userAnswer.length}">
                <div ng-repeat="opt in item.q._options">
                  <div bind-html-compile="opt.text" ng-if="opt.correct">
                  </div>
                </div>
                <!--div ng-bind-html="item.q.answer[0]">
                </div -->
                <i class="fa fa-check" style="color:#72c02c;">
                </i>
              </li>
              <li class="wrong_select" ng-if="!item.r.flag && item.r.userAnswer">
                <div ng-bind-html="item.r.userAnswer[0]">
                </div>
                <i class="fa fa-times" style="color:#ed5565;">
                </i>
              </li>
            </ul>
            <ul class="ansrs" ng-switch-when="multiple">
              <li class="correct_select" ng-class="{'missed_one': !item.r.userAnswer}">
                <div ng-repeat="_answer in item.q._options" ng-if="_answer.correct">
                  <div bind-html-compile="_answer.text">
                  </div>
                  <i class="fa fa-check" style="color:#72c02c;">
                  </i>
                </div>
              </li>
              <li class="wrong_select" ng-if="!item.r.flag && item.r.userAnswer">
                <div ng-repeat="_answer in item.r.userAnswer">
                  <div bind-html-compile="_answer">
                  </div>
                </div>
                <i class="fa fa-times" style="color:#ed5565;">
                </i>
              </li>
            </ul>
            <ul class="ansrs" ng-switch-when="mfill">
              <li class="correct_select" ng-class="{'missed_one': !item.r.userAnswer}">

                <span ng-repeat="opt in item.q._options">
                <span ng-repeat="value in opt.texts" ng-if="value.text && $index == 0">{{value.text}}</span>
                <span ng-if="$index != item.q._options.length-1">, </span>
                </span>

                <i class="fa fa-check" style="color:#72c02c;">
                </i>
              </li>
              <li class="wrong_select" ng-if="item.r.userAnswer && !item.r.flag">
                {{ item.r.userAnswer.join(",") }}
                <i class="fa fa-times" style="color:#ed5565;">
                </i>
              </li>
            </ul>
            <ul class="ansrs" ng-switch-when="order">
              <li class="missed_one" ng-repeat="opt in item.q._options" ng-if="!item.r.answerd">
               <span>
                  {{opt.text}}
                </span>
                <i class="fa fa-check" style="color:#72c02c;"></i> 
              </li>
              <li ng-class="{ wrong_select: !opt.correct, correct_select:opt.correct}" ng-repeat="opt in item.r.userAnswer" ng-if="item.r.answerd">
                <span>
                  {{opt.text}}
                </span>
                <i class="fa fa-check" ng-if="opt.correct" style="color:#72c02c;"></i>
                <i class="fa fa-times" style="color:#ed5565;" ng-if="!opt.correct" ></i>
              </li>
            </ul>
            <ul class="ansrs" ng-switch-when="typing">
              <li ng-class="{ wrong_select: item.r.userAnswer&&!item.r.flag, correct_select:item.r.flag, missed_one:!item.r.userAnswer}">
                <span>
                  {{ item.q.content }}
                </span>
                <i class="fa fa-check" ng-if="item.r.flag" style="color:#72c02c;"></i>
                <i class="fa fa-times" style="color:#ed5565;" ng-if="item.r.userAnswer&&!item.r.flag" ></i>
                <i class="fa fa-check" style="color:#72c02c;" ng-if="!item.r.userAnswer"></i>
              </li>
            </ul>
            <ul class="ansrs" ng-switch-when="tof">
              <li class="correct_select" ng-class="{'missed_one': !item.r.userAnswer}">
                {{ item.q._options[0].correct }}
                <i class="fa fa-check" style="color:#72c02c;"></i>
              </li>
            </ul>
            <ul class="ansrs" ng-if="item.r.userAnswer|| item.r.attachments" ng-switch-when="short">
              <li class="empty_select" ng-if="item.r.userAnswer">
                <div bind-html-compile="item.r.userAnswer[0]">
                </div>
              </li>
              <div class="col-sm-12" ng-repeat="file in item.r.attachments" style="border:1px solid #DCDCDC;padding:5px 10px; border-radius:4px; margin-top:5px;">
                  <b>{{file.source}}</b>
                  <div class="pull-right">
                  <a class="btn btn-xs btn-primary" aria-hidden="true" ng-click="ctrl.preview(file,ctrl.reasonid)"><i class="fa fa-eye">&nbsp;</i>{{'Preview' | translate}}</a>
                </div>
              </div>
              <li class="empty_select" ng-if=" (!item.r.userAnswer ) && (!item.r.attachments)">
                {{ 'Not Attempted' | translate }}
              </li>
            </ul>
            <ul class="ansrs" ng-switch-when="sDD">
              <li class="correct_select" ng-class="{'missed_one': !item.r.userAnswer}">
                {{ item.q._options[0].correct }}
                <i class="fa fa-check" style="color:#72c02c;">
                </i>
              </li>
            </ul>
            <ul class="ansrs" ng-switch-when="mDD">
              <li class="correct_select" ng-class="{'missed_one': !item.r.userAnswer}" ng-repeat="_answer in item.q._options">
                {{ _answer.text }}
                <i class="fa fa-check" style="color:#72c02c;">
                </i>
              </li>
            </ul>
          </div>
          <div class="margin-bottom-10"></div>
          <h5 ng-if="item.q.comment">
            <b>
              {{ 'Explanation' | translate }} :
            </b>
          </h5>
          <div ng-bind-html="item.q.comment">
          </div>
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding tchr_cmnt_hldr" ng-if="item.q.comments||item.q.commentaudio||item.q.commentvideo||item.q.file&&item.q.comments.length> 0&&(item.q.comments.length> 1||(item.q.comments[0]&&item.q.comments[0].comment)) ">
            <h4 ng-if="item.q.commentaudio||item.q.file||item.q.commentvideo">
              {{ 'Teacher Comments' | translate }}:
            </h4>
            <div class="notes_holder" ng-if="item.q.commentaudio||item.q.file||item.q.commentvideo">
              <div class="notes">
                <a href="" ng-click="ctrl.showAudio[$index] = true" ng-if="item.q.commentaudio && !ctrl.showAudio[$index]" title="Audio">
                  <i class="fa fa-volume-down">
                  </i> {{ 'Voice comment' | translate }}
                </a>
                <a href="" ng-click="ctrl.showAudio[$index] = false" ng-if="item.q.commentaudio && ctrl.showAudio[$index]" title="Audio">
                  <i class="fa fa-volume-up">
                  </i> {{ 'Voice comment' | translate }}
                </a>
                <div class="audio_hldr" ng-if="item.q.commentaudio && ctrl.showAudio[$index]">
                  <audio autoplay="" controls="" ng-src="{{ item.q.audiourl }}">
                  </audio>
                  <button class="fa fa-times btn" ng-click="ctrl.showAudio[$index] = false">
                  </button>
                </div>
                <a href="javascript:void(0);" ng-click="ctrl.previewVideo(item.q)" ng-if="item.q.commentvideo" title="Video">
                  <i class="fa fa-video-camera">
                  </i> {{ 'Video comment' | translate }}
                </a>
                <a class="hide_print" download="" href="{{ item.q.fileurl }}" ng-if="item.q.file" title="Attachment">
                  <i class="fa fa-paperclip">
                  </i> {{ 'Attachment' | translate }}
                </a>
              </div>
            </div>
            <div class="clearfix"></div>
            <div ng-if="comment.comment" ng-repeat="comment in item.q.comments">
              <div class="profile_round">
                <img ng-src="{{ comment.user_avatar }}" style="max-width: 100%;" title="Teacher" />
              </div>
              <p class="tchr_cmnt">
                {{comment.fullname}}
                <strong>
                  :
                </strong> {{ comment.comment }}
              </p>
              <div class="clearfix">
              </div>
            </div>
          </div>
          <div class="clearfix">
          </div>
          <div class="lin">
          </div>
          <div class="clearfix margin-bottom-40">
          </div>
        </div>
      </div>
      <div ng-if="ctrl.activetab == 'detailsByQuestion'">
        <div ng-if="ctrl.questionsRecords | isEmpty">
          {{ 'No Records' | translate }}
        </div>
        <div class="your_ans_info" ng-if="!ctrl.questionsRecords | isEmpty">
          <i class="fa fa-hand-o-down">
          </i> {{ 'This indicates your answer'| translate }}
        </div>
        <div class="exam_det_rep" ng-if="qrecord.type!='mquestion'" ng-repeat="qrecord in ctrl.displayquestionsRecords">
          <div class="qstn">
            <div class="qstn_index">
              Q{{ $index + 1 }}.
            </div>
            <div class="qstn_typ">
              {{ ctrl.typename[qrecord.type]|translate }}
            </div>
            <div class="tag-box tag-box-v2 adjust in_left">
              <div bind-html-compile="qrecord.content">
              </div>
            </div>
          </div>
          <p class="people_answered">
            {{ 'Total People Answered:'|translate }} {{ qrecord.totalAnswerCnt }}
          </p>
          <div class="clearfix margin-bottom-10">
          </div>
          <b>
            {{ 'Difficulty level' |translate }}
          </b>
          <div class="level_arrow" ng-class="{low: qrecord.level == '0', mid: qrecord.level == '1', high: qrecord.level == '2'}">
          </div>
          <div class="progress progress-stack progress-u progress-sm rounded-2x" style="margin-top:15px">
            <div class="progress-bar progress-bar-u" role="progressbar" style="width:33%" translate="">
              LOW
            </div>
            <div class="progress-bar progress-bar-orange" role="progressbar" style="width:34%" translate="">
              MEDIUM
            </div>
            <div class="progress-bar progress-bar-red" role="progressbar" style="width:33%" translate="">
              HIGH
            </div>
          </div>
          <div class="clearfix margin-bottom-10">
          </div>
          <b translate="">
            Overall performance
          </b>
          <div class="level_arrow your_ans_icon_holder">
            <div class="your_ans" ng-class="{'active':qrecord.result=='correct'}" style="width:{{ qrecord.totalCorrectCntPercentage | number }}%">
              <i class="fa fa-hand-o-down" style="color: #72c02c;">
              </i>
            </div>
            <div class="your_ans" ng-class="{'active':qrecord.result=='wrong'}" style="width:{{ qrecord.totalWrongCntPercentage | number }}%">
              <i class="fa fa-hand-o-down" style="color: #e74c3c;">
              </i>
            </div>
            <div class="your_ans " ng-class="{'active':qrecord.result=='miss'}" style="width:{{ qrecord.totalMissCntPercentage | number }}%">
              <i class="fa fa-hand-o-down" style="color: #337ab7;">
              </i>
            </div>
          </div>
          <div class="progress progress-stack progress-u progress-sm rounded-2x" style="margin-top:15px">
            <div class="progress-bar progress-bar-u" role="progressbar" style="width:{{ qrecord.totalCorrectCntPercentage | number }}%">
            </div>
            <div class="progress-bar progress-bar-red" role="progressbar" style="width:{{ qrecord.totalWrongCntPercentage | number }}%">
            </div>
            <div class="progress-bar progress-bar-blue" role="progressbar" style="width:{{ qrecord.totalMissCntPercentage | number }}%">
            </div>
          </div>
          <div class="row exam_info">
            <div class="col-md-2 padding-right-0">
              <div class="progress progress-u progress-sm">
                <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="88" class="progress-bar progress-bar-u" role="progressbar" style="width: 100%">
                </div>
              </div>
              <h3 class="heading-xs">
                {{ 'Correct' |translate }} {{ qrecord.totalCorrectCntPercentage | number:1 }}%
              </h3>
            </div>
            <div class="col-md-2 padding-right-0">
              <div class="progress progress-u progress-sm">
                <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="88" class="progress-bar progress-bar-red" role="progressbar" style="width: 100%">
                </div>
              </div>
              <h3 class="heading-xs">
                {{ 'Wrong'|translate }} {{ qrecord.totalWrongCntPercentage | number:1 }}%
              </h3>
            </div>
            <div class="col-md-2 no-padding">
              <div class="progress progress-u progress-sm">
                <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="88" class="progress-bar progress-bar-blue" role="progressbar" style="width: 100%">
                </div>
              </div>
              <h3 class="heading-xs">
                {{ 'Not Attempted'| translate }} {{ qrecord.totalMissCntPercentage | number:1 }}%
              </h3>
            </div>
          </div>
        </div>
      </div>
      <div ng-if="ctrl.activetab=='knowledgeSummary'">
        <table class="table result_knowledge_summary" ng-if="ctrl.showknowledge">
          <tr>
            <th style="width:40%" translate="">
              Knowledges
            </th>
            <th style="width:20%" translate="">
              Correct
            </th>
            <th style="width:20%" translate="">
              Wrong/Miss
            </th>
            <th style="width:20%" translate="">
              Rate(%)
            </th>
          </tr>
          <tr ng-repeat="(key,val) in ctrl.knowledgeresults">
            <td>
              {{key}}
            </td>
            <td class="text_indent10">
              {{val.correct}}
            </td>
            <td class="text_indent15">
              {{val.wrong}}
            </td>
            <td class="text_indent10">
              {{val.rate}}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>