<script src="../resources/js/chart.js"></script>
<script src="../resources/js/chartjsdatalabels.js"></script>
<script src="../resources/js/resultadoencuesta233.js"></script>
<input type="hidden" id="opc" name="opc" value="<?php echo FuncionesComunes::encrypt("cancelarEncuesta233");?>">
<input type="hidden" id="opc2" name="opc2" value="<?php echo FuncionesComunes::encrypt("guardaImagenGrafica");?>">
<input type="hidden" id="nombreAlumno" name="nombreAlumno" value="<?php echo $_REQUEST["nombreAlumno"]; ?>"/>
<input type="hidden" id="userId" name="userId" value="<?php echo $_REQUEST["userId"];?>"/>
<input type="hidden" id="encuestaId" name="encuestaId" value="<?php echo FuncionesComunes::encrypt($encuesta233Id);?>"/>
<div class="form-group row">
    <div class="col-md-12 col-xs-12 col-sm-12">
        <h5>Hola <b><?php echo $nombreAlumno;?></b>.</h5>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-12 col-xs-12 col-sm-12">
        <div class="card">
            <div class="card-header text-center text" style="background: #B9F0D0">
                <strong class="text-center text-success"><i class="fa fa-check text-success"></i>&nbsp;Descubre tu resultado.</strong>
            </div>
        </div>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-12 col-xs-12 col-sm-12">
        <p class="text-justify">
            <strong style="color:#4B96CE">HALLAZGOS.</strong><br>
            <strong>&iquest;Qu&eacute; tan bien rueda tu vida?</strong>
        </p>
        <p class="text-justify">
            Observa y presta atenci&oacute;n a la forma dentro de tu rueda. Imagina que es la cantidad de aire que tiene tu rueda y responde las siguientes preguntas.
            <ul>
                <li>&iquest;Puedo rodar y avanzar bien con esa cantidad de aire&quest;</li>
                <li>Si hay &aacute;reas desinfladas: &iquest;a qu&eacute; lo atribuyo&quest;</li>
                <li>&iquest;Qu&eacute; puedo hacer para inflar m&aacute;s las &aacute;reas con poco aire para lograr mi rueda gire mejor&quest;</li>
                <li>&iquest;Qu&eacute; acciones inmediatas puedo llevar a cabo para lograr un mayor balance entre mis &aacute;reas&quest;</li>
            </ul>
        </p>
        <p class="text-justify">
            <textarea name="respuestaEjercicio233" rows="4" cols="70" maxlength="500" placeholder="Espacio de respuesta."></textarea>
        </p>
    </div>
</div>
<script>
    var imagenGrafica;
    var radarChart;
    function pintarGrafica()
    {
        try
        {
            marksData = {
                labels: ['<?php echo $arregloEtiquetasAreas[0];?>', '<?php echo $arregloEtiquetasAreas[1];?>', '<?php echo $arregloEtiquetasAreas[2];?>', '<?php echo $arregloEtiquetasAreas[3];?>', '<?php echo $arregloEtiquetasAreas[4];?>',  '<?php echo $arregloEtiquetasAreas[5];?>', '<?php echo $arregloEtiquetasAreas[6];?>', '<?php echo $arregloEtiquetasAreas[7];?>'],
                datasets: [{
                    label: "¿Qué tan bien rueda tu vida?",
                    //backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    backgroundColor: 'rgba(75, 150, 336, 0.2)',
                    borderColor: 'rgb(75, 150, 336)',
                    pointBackgroundColor: 'rgb(75, 150, 336)',
                    pointBorderColor: '#4B96CE',
                    pointHoverBackgroundColor: '#4B96CE',
                    pointHoverBorderColor: 'rgb(75, 150, 336)',
                    fill: true,
                    data: [<?php echo $arregloValoresAreas[0];?>, <?php echo $arregloValoresAreas[1];?>, <?php echo $arregloValoresAreas[2];?>, <?php echo $arregloValoresAreas[3];?>, <?php echo $arregloValoresAreas[4];?>, <?php echo $arregloValoresAreas[5];?>, <?php echo $arregloValoresAreas[6];?>, <?php echo $arregloValoresAreas[7];?>]
                }]
            };
            cxt = $('#myChart');
            radarChart = new Chart(cxt, {
                type: 'radar',
                data: marksData,
                options:{
                    responsive: true,
                    scales: {
                        r: {
                            angleLines: {
                                display: false
                            },
                            suggestedMin: 0,
                            suggestedMax: 10
                        }
                    }
                }
            });
            imagenGrafica = radarChart.toBase64Image('image/png',1);
        }
        catch (e)
        {
            console.log(e);
        }

    }
</script>
<div id="seccionTotal" name="seccionTotal">
    <div class="form-group row" id="seccionEncuestaIndicadores" name="seccionEncuestaIndicadores">
        <div class="col-md-8 col-xs-8 col-sm-8">
            <div id="seccionIndicadores" name="seccionIndicadores">
                <div class="chart-container">
                    <canvas id="myChart" name="myChart" style="height: 400px; width: 400px;"></canvas>
                    <img id="url" width="1px" height="1px" style="visibility: hidden"/>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-4 col-sm-4">
            <input id="mostrarRetroalimentacion133" name="mostrarRetroalimentacion133" type="image" src="https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_ver-retro_off-01.png" onmouseover="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_ver-retro_on-01.png'" onmouseout="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_ver-retro_off-01.png'" onclick="mostrarRetroalimentacion()"></input>
            <h4><strong style="color:#4B96CE">Retroalimentaci&oacute;n</strong></h4>
            <p class="text-justify">
                Trazar tu <strong class="text-primary">rueda de la vida</strong> te permite identificar <strong>&aacute;reas relevantes</strong> a las que no est&aacute;s prestando <strong>suficiente atenci&oacute;n</strong> y tambi&eacute;n agregar <strong>&aacute;reas nuevas</strong> que podr&iacute;an ser <strong>fuente de satisfacci&oacute;n</strong> y desarrollo personal.<br><br>
                Lograr balance, armon&iacute;a, en distintas &aacute;reas de nuestra vida es una <strong>responsabilidad personal</strong>. Nadie m&aacute;s te puede asegurar balance. Nadie lo puede hacer por ti. Habr&aacute; momentos donde un &aacute;rea de tu vida se <strong>desinfla</strong> mientras que otras &aacute;reas tienen <strong>suficiente aire</strong>. Y por ello es importante estar atentas a las distintas &aacute;reas para nosotras mismas <strong>equilibrar, armonizar</strong>.
            </p>
        </div>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-12 col-xs-12 col-sm-12 text-center">
        <input id="cancelarEncuesta233" name="cancelarEncuesta233" type="image" src="https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_reintentar_off-01.png" onmouseover="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_reintentar_on-01.png'" onmouseout="this.src='https://tiempo-mandarina.org/encuesta2/resources/images/bid_btn_reintentar_off-01.png'" onclick="confirmarCancelacionEncuesta()"></input>
       
    </div>
</div>
<script>
    pintarGrafica();
    document.getElementById("url").style.width="0px";
    document.getElementById("url").style.height="0px";
</script>