<script src="../resources/js/seccion1encuesta233.js"></script>
<form id="frmSeccion1Encuesta233" name="frmSeccion1Encuesta233" method="post">
    <input type="hidden" id="opc" name="opc" value="<?php echo FuncionesComunes::encrypt("registrarSeccion1Encuesta233");?>">
    <input type="hidden" id="nombreAlumno" name="nombreAlumno" value="<?php echo $_REQUEST["nombreAlumno"]; ?>"/>
    <input type="hidden" id="userId" name="userId" value="<?php echo $_REQUEST["userId"];?>"/>
    Hola <b><?php echo $nombreAlumno;?></b>.<br><br>
    <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><strong class="text-dark">100%</strong></div>
    </div><br>
    Para llevar a cabo el ejercicio te pedimos realizar lo siguiente: <br><br>
    <ul>
        <li>Selecciona las <strong class="text-primary">8 &aacute;reas m&aacute;s relevantes de tu vida</strong> y califica qu&eacute; tan satisfecha te sientes en cada una de ellas.</li>
        <li>Para esto selecciona los cuadrados amarillos, los cuales cambiar&aacute;n a verde de acuerdo a tu selecci&oacute;n.</li>
        <li>Puedes agregar temas que no est&eacute;n en las opciones seleccionando la opci&oacute;n <strong>&quot;Otro&quot;</strong>.</li>
        <li>Califica las 8 &aacute;reas seleccionadas con una puntuaci&oacute;n del <strong>1 al 10</strong>, por medio de las flechas que se despliegan al costado del espacio en blanco o escribiendo el n&uacute;mero.</li>
        <li>Recuerda que <strong>1 es insatisfecha</strong> y <strong class="text-primary">10 es muy satisfecha</strong>.</li>
    </ul>
    <br><br>
    <div class="row">
        <div class="col-md-12 col-xs-12 col-sm-12">
            <?php
            $contadorPreguntas=1;
            while ($rowPregunta = $resultadoPreguntasSec1->fetch_object())
            {
                if($contadorPreguntas==1)
                {
                    ?>
                    <div class="form-group row">
                    <?php
                }
                if($rowPregunta->orden<=13)
                {
                    ?>
                        <div class="col-md-3 col-xs-10 col-sm-5 text-left">
                            <nobr><input id="<?php echo "pregunta".$rowPregunta->orden; ?>" name="<?php echo $rowPregunta->orden; ?>" type="checkbox" data-toggle="toggle" data-on="<i class='fa fa-check'></i>" data-off="<i class='fa fa-times'></i>" data-onstyle="success" data-offstyle="warning" onchange="ocultarMostrarValor('<?php echo "pregunta".$rowPregunta->orden; ?>','<?php echo "valor".$rowPregunta->orden; ?>','<?php echo $rowPregunta->orden; ?>')"><label id="<?php echo "label".$rowPregunta->orden; ?>" name="<?php echo "label".$rowPregunta->orden; ?>">&nbsp;<?php echo $rowPregunta->pregunta; ?></label></nobr>
                        </div>
                        <div class="col-md-1 col-xs-2 col-sm-1 text-right">
                            <input id="<?php echo "valor".$rowPregunta->orden; ?>" name="<?php echo "valor".$rowPregunta->orden; ?>" type="number"  max="10" min="1" style="width: 60px;display: none;" value="" class="block-right" onchange="ocultarGrafica()">
                        </div>
                    <?php
                }
                else
                {
                    ?>
                        <div class="col-md-3 col-xs-10 col-sm-5 text-left">
                            <nobr><input id="<?php echo "pregunta".$rowPregunta->orden; ?>" name="<?php echo $rowPregunta->orden; ?>" type="checkbox" data-toggle="toggle" data-on="<i class='fa fa-check'></i>" data-off="<i class='fa fa-times'></i>" data-onstyle="success" data-offstyle="warning" onchange="ocultarMostrarValor('<?php echo "pregunta".$rowPregunta->orden; ?>','<?php echo "valor".$rowPregunta->orden; ?>','<?php echo $rowPregunta->orden; ?>')"><label id="<?php echo "label".$rowPregunta->orden; ?>" name="<?php echo "label".$rowPregunta->orden; ?>">&nbsp;<?php echo $rowPregunta->pregunta; ?></label>
                            <input id="<?php echo "texto".$rowPregunta->orden; ?>" name="<?php echo "texto".$rowPregunta->orden; ?>" type="text"  maxlength="50" minlength="5" style="width: 120px;display: none;" value="" onchange="ocultarGrafica()"></nobr>
                        </div>
                        <div class="col-md-1 col-xs-2 col-sm-1 text-right">
                            <input id="<?php echo "valor".$rowPregunta->orden; ?>" name="<?php echo "valor".$rowPregunta->orden; ?>" type="number"  max="10" min="1" style="width: 60px;display: none;" value="" onchange="ocultarGrafica()">
                        </div>
                    <?php
                }
                if($contadorPreguntas==3)
                {
                    ?>
                    </div>
                    <?php
                    $contadorPreguntas=0;
                }
                $contadorPreguntas++;
            }
            ?>
            </div>
            <div class="form-group row text-right">
                <div class="col-md-12 col-xs-12 col-sm-12">
                    <!--<button id="guardarSeccion1Encuesta233" name="guardarSeccion1Encuesta233" type="submit" class="btn btn-primary" ><i class="fa fa-arrow-right"></i>&nbsp;Guardar y Continuar</button>-->
                    <input id="guardarSeccion1Encuesta233" name="guardarSeccion1Encuesta233" type="image" style="display: none" src="https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_guardar_off-01.png" onmouseover="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_guardar_on-01.png'" onmouseout="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_guardar_off-01.png'"></input>
                </div>
            </div>
        </div>
    </div>
</form>
<div class="form-group row text-center">
    <div class="col-md-2 col-xs-2 col-sm-2">
    </div>
    <div class="col-md-8 col-xs-8 col-sm-8">
        <!--<button class="btn btn-primary text-center" id="verGrafica" name="verGrafica" onclick="pintarGrafica();"><i class="fa fa-pie-chart"></i>&nbsp; Ver Gr&aacute;fica</button>-->
        <input id="verGrafica" name="verGrafica" type="image" onclick="pintarGrafica();" src="https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_ver-grafica-off-01.png" onmouseover="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_ver-grafica-on-01.png'" onmouseout="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_ver-grafica-off-01.png'"></input>
        <div id="seccionGrafica" name="seccionGrafica">
            <div class="chart-container">
                <canvas id="myChart" name="myChart" style="display: block; box-sizing: border-box; "></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-xs-2 col-sm-2">
    </div>
</div>