<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;See your results.</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">FINDINGS.</strong><br>
            <strong>How well does your life roll?</strong>
        </p>
        <p class="text-justify">
           Observe and pay attention to the shape inside your wheel. Imagine that this is the amount of air in your wheel and answer the following questions.  
            <ul>
                <li>Can I roll and live well with that amount of air?</li>
                <li>If there are deflated areas: what do I attribute them to?</li>
                <li>What can I do to inflate the low air areas more to make my wheel spin better?</li>
                <li>What immediate actions can I take to achieve a better balance between my areas?</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://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_ver-retro_off-01.png" onmouseover="this.src='https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_ver-retro_on-01.png'" onmouseout="this.src='https://sadpro.osvaldo.com/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">
				Plotting your <strong>wheel of life</strong> allows you to identify <strong>relevant areas</strong> that you are not paying <strong>enough attention</strong> to, and to add <strong>new areas</strong> that could be a <strong>source of satisfaction</strong> and personal development.<br><br>
				Achieving balance, harmony, in different areas of our lives is a <strong>personal responsibility</strong>. No one else can assure you balance. Nobody can do it for you. There will be times where one area of your life <strong>goes flat</strong> while other areas have <strong>enough air</strong>. And for this reason it is important to be attentive to the different areas for ourselves to <strong>balance, harmonize</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://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_reintentar_off-01.png" onmouseover="this.src='https://sadpro.osvaldo.com/encuesta2/resources/images/bid_btn_reintentar_on-01.png'" onmouseout="this.src='https://sadpro.osvaldo.com/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>