{% extends 'AdminCandidat/ElearningSession/Quiz/base.html.twig' %}

{% block title %} Quiz  Formation E-learning {% endblock %}
{% block breadcrumb1 %} Quiz Formation E-learning {% endblock %}
{% block breadcrumb2 %} Quiz {% endblock %}
{% block stylesheet %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/total-task/css/candidat-quiz-elearning-session.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.css">

{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12">

            <!--Commencez la quiz diapo 1-->
            <div class="diapo1" style="background-image: url({{ asset('uploads/ccccccccccccccccccccccc-ConvertImage.jpg') }})">
                <div class="container" style="margin-top: 40px;">
                    <div class="row">
                        <div class="col-md-12 center">
                            <div class="" style="margin-top: 15px;">
                                <h2 style="font-weight: bold;">Session
                                    <spam>: session X</spam>
                                </h2>
                                <h2 style="font-weight: bold;">Information du formation</h2>

                            </div>

                        </div>

                    </div>
                </div>

                <div class="" style="margin-top: 15px;">
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <h4 style="margin-left: 15px;">
                                <i class="fa fa-briefcase colortmp"></i> Formation:
                                <span class="pull-right"> Formation X</span>
                            </h4>
                            <h4 style="margin-left: 15px;">
                                <i class="fa fa-clock-o colortmp"></i> Durée:
                                <span class="pull-right"> 30 minutes</span>
                            </h4>
                            <h4 style="margin-left: 15px;"><i class="fa fa-question-circle colortmp"></i> Questions:
                                <span class="pull-right"> 30</span>
                            </h4>
                        </div>
                        <div class="col-md-4"></div>
                    </div>

                </div>

                <div class="row" style="margin-top: 25px">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <div class="center">
                            <p style="font-size: 15px">
                                En connaissez-vous suffisamment sur les études de marché ou avez-vous encore besoin de
                                couvrir
                                beaucoup de terrain? Répondez à ce questionnaire pour savoir dans quelle mesure vous
                                êtes
                                familiarisé avec les études de marché.
                            </p>


                            <div class="form-group">
                                <button id="btnCommenceQuiz" type="button" onclick="lanceQuiz()"
                                        class="btn btn-wide btn-lg  btn-o btn-danger margin-top-10">
                                    Commencer <i class="fa fa-hand-o-right"></i>
                                </button>
                            </div>



                        </div>
                    </div>
                    <div class="col-md-2"></div>
                </div>

            </div>
            <!--end diapo 1-->

            <!-- passer le quiz -->
            <div class="diapo2" style="display:none ; ">
                <div class="row">
                    <div class="container">
                        <div id="rootwizard" style="padding: 10px;">
                            <div class="">
                                <div class="navbar-inner">
                                    <div class="container ">
                                        <ul class="hidden">
                                            <li><a href="#tab1" data-toggle="tab">First</a></li>
                                            <li><a href="#tab2" data-toggle="tab">Second</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content" style="background-color: #f8f8f8">
                                <div id="countdown" style="float: right;"></div>
                                <div class="tab-pane" id="tab1">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <div class="quest1">
                                                <div class="" style="margin-top: -18px;"><span
                                                            style="font-size: 30px; ">Question  <b
                                                                class="questionCurrent">1</b> / <b>30</b></span>
                                                </div>
                                                <hr>
                                                <h1 class="NomQuest"><i class="ti-check-box" style="color:#e44f31 "></i> Qu'est ce qu'une Question à
                                                    Choix Unique (QCU) ?</h1>
                                                <div class="response">
                                                    <div class="checkbox clip-check check-danger check-md ">
                                                        <input type="checkbox" id="checkbox17" value="1">
                                                        <label for="checkbox17">
                                                            <span class="ques">Une question à laquelle on ne propose qu'une seule réponse</span>
                                                        </label>
                                                    </div>
                                                    <div class="checkbox clip-check check-danger check-md ">
                                                        <input type="checkbox" id="checkbox18" value="1">
                                                        <label for="checkbox18">
                                                            <span class="ques">Une question à laquelle on ne propose qu'une seule réponse</span>
                                                        </label>
                                                    </div>
                                                    <div class="checkbox clip-check check-danger check-md ">
                                                        <input type="checkbox" id="checkbox19" value="1">
                                                        <label for="checkbox19">
                                                            <span class="ques">Une question à laquelle on ne propose qu'une seule réponse</span>
                                                        </label>
                                                    </div>
                                                    <div class="checkbox clip-check check-danger check-md ">
                                                        <input type="checkbox" id="checkbox19" value="1">
                                                        <label for="checkbox19">
                                                            <span class="ques">Une question à laquelle on ne propose qu'une seule réponse</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="tab2">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <div class="quest2">
                                                <div class="" style="margin-top: -18px;"><span
                                                            style="font-size: 30px; ">Question  <b
                                                                class="questionCurrent">2</b> / <b>30</b></span>
                                                </div>
                                                <hr>
                                                <h1 class="NomQuest"><i class="ti-check-box" style="color:#e44f31 "></i> Qu'est ce qu'une Question à
                                                    Choix Unique (QCU) ?</h1>
                                                <div class="response">
                                                    <div class="checkbox clip-check check-danger check-md ">
                                                        <input type="checkbox" id="checkbox17" value="1">
                                                        <label for="checkbox17">
                                                            <span class="ques">Une question à laquelle on ne propose qu'une seule réponse</span>
                                                        </label>
                                                    </div>
                                                    <div class="checkbox clip-check check-danger check-md ">
                                                        <input type="checkbox" id="checkbox18" value="1">
                                                        <label for="checkbox18">
                                                            <span class="ques">Une question à laquelle on ne propose qu'une seule réponse</span>
                                                        </label>
                                                    </div>
                                                    <div class="checkbox clip-check check-danger check-md ">
                                                        <input type="checkbox" id="checkbox19" value="1">
                                                        <label for="checkbox19">
                                                            <span class="ques">Une question à laquelle on ne propose qu'une seule réponse</span>
                                                        </label>
                                                    </div>
                                                    <div class="checkbox clip-check check-danger check-md ">
                                                        <input type="checkbox" id="checkbox19" value="1">
                                                        <label for="checkbox19">
                                                            <span class="ques">Une question à laquelle on ne propose qu'une seule réponse</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <ul class="pager wizard">
                                    <li class="next">
                                        <button class="btnNextQues btn btn-sm pull-right" type="button"
                                                href="javascript:;">Suivant <i
                                                    class="fa fa-angle-double-right"></i></button>
                                    </li>
                                    <li>
                                        <button id="btnSaveQuiz" type="button"
                                                class="btn btn-sm pull-right btn-danger">
                                            Terminer <i class="fa fa-hand-o-right"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button id="btnValide" type="button"
                                                class="btn btn-sm pull-right btn-danger stoptime">
                                            Valide <i class="fa fa-check"></i>
                                        </button>
                                    </li>
                                </ul>

                                <div id="bar" class="progress barProgressQuiz">
                                    <div class="progress progress-striped active progress-sm" style="height: 17px">
                                        <div id="barQuiz" class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0"
                                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;"><span>60% Complete</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

            <!--end quizz-->

            <!--score quiz-->
            <div class="diapo3">

                <div class="container" style="margin-top: 40px;">
                    <div class="row">
                        <div class="col-md-12 center">
                            <div class="" style="margin-top: 15px;">
                                <h2 style="font-weight: bold;">Merci
                                    <spam>Nom condidate</spam>
                                </h2>
                            </div>
                            <div class="" style="margin-top: 15px;">
                                <h4 style="margin-left: 15px;">
                                    <i class=" ti-stats-up colortmp"></i> Score : <span class="score"> 50 %</span>

                                </h4>
                                <h4 style="margin-left: 15px;"><i class=" ti-cup colortmp"></i> Niveau : <span class="niveau"> Moyenne</span></h4>
                                <h4 style="margin-left: 15px;"><i class=" ti-cup colortmp"></i> Niveau : <span class="niveau">
                                        <i class="fa fa-star margin-right-5 text-yellow"></i>
                                        <i class="fa fa-star margin-right-5 text-yellow"></i>
                                        <i class="fa fa-star margin-right-5 text-yellow"></i>
                                        <i class="fa fa-star margin-right-5 text-yellow"></i>
                                        <i class="fa fa-star margin-right-5 text-yellow"></i>
                                    </span></h4>

                            </div>
                        </div>

                    </div>
                </div>
                <div class="row" style="margin-top: 25px">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <div class="center">
                            <p style="font-size: 15px">
                                En connaissez-vous suffisamment sur les études de marché ou avez-vous encore besoin de
                                couvrir
                                beaucoup de terrain? Répondez à ce questionnaire pour savoir dans quelle mesure vous
                                êtes
                                familiarisé avec les études de marché.
                            </p>


                            <div class="form-group">
                                <button id="btnCommenceQuiz" type="button"
                                        class="btn btn-wide btn-lg  btn-o btn-danger margin-top-10">
                                    Télecharger votreAttestation <i class="fa fa-print"></i>
                                </button>
                            </div>



                        </div>
                    </div>
                    <div class="col-md-2"></div>
                </div>


            </div>
            <!--end score-->

        </div>
    </div>



{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Simple-jQuery-Html5-Based-360-Degree-Countdown-Timer-countdown360/src/jquery.countdown360.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.js"></script>
    <script src="{{ asset('assets/total-task/app/candidat-quiz-elearning-session.js') }}"></script>

{% endblock %}