2

Tengo un problema con mi código html usando angular js, el caso es que quiero pasar una variable llamada "count" que pertenece a la nota que saco un estudiante en una prueba en línea, la cual se va acumulando a medida que el estudiante va teniendo las respuestas correctas. El problema es que al final, quiero colocar un gráfico, he buscado la api de google (https://developers.google.com/chart/), y he encontrado un código el cual he puesto en mi html. El caso es que no sé como hacer para que la variable de la prueba en línea que es la nota del alumno, se lea en el código javascript. De hecho lo he intentado de diferentes formas, niguna funciona.

Esto es lo que llevo en index.html

<html ng-app="miAplicacion">
<head>
<title>Proyecto prueba de lapso</title>
    <script src="js/angular.min.js"></script> <!--Declarando Angular-->
    <script src="js/app.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css"> <!--Declarando Bootstrap-->
    <link rel="stylesheet" href="css/style.css"> <!--Declarando estilo css-->
    
    <script type="text/javascript">
           //Aqui es donde empieza la api de google (el grafico)
          // Load the Visualization API and the corechart package.
          google.charts.load('current', {'packages':['corechart']});
    
          // Set a callback to run when the Google Visualization API is loaded.
          google.charts.setOnLoadCallback(drawChart);
    
          // Callback that creates and populates a data table,
          // instantiates the pie chart, passes in the data and
          // draws it.
          function drawChart() {
            
    
            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'x');
            data.addColumn('number', 'y');
            data.addRows([
              ['Correctas', 30], //Aqui es donde se supone que quiero colocar la variable (count*100)/20
              ['Fallidas', 66] //Aqui es donde se supone que quiero colocar la variable counterror
            ]);
    
            // Set chart options
            var options = {'title':'Resultados',
                           'width':400,
                           'height':300};
    
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
          }
        </script>
    
    <br><br><br>
    <img ng src="img/logo.jpg" with="200px" height="200px"><br><br>
    <b>Escuela: </b>Computación<br>
    <b>Materia: </b>Programación I<br>
    <b>Semestre:</b> 2<br>
    <b>Fecha: </b> <div ng-controller="fechaController">
       <span id ="fecha">{{CurrentDate | date:'dd-MM-yyyy'}}</span>
    </div>
    Tiempo transcurrido: <span id="minutos">0</span>:<span id="segundos">0</span>
          </p>
    
    <br><br>
    </head>
    <body onload="carga()">
    <center><br><br>
    <div ng-hide="tab == 6"><div ng-hide="tab == 5"><div ng-hide="tab == 4"><div ng-hide="tab == 3"><div  ng-hide="tab == 2"><div ng-hide="tab == 1"><input type="button" ng-click="tab = 0" value="Comenzar" ng-hide="tab == 0"><br></div></div></div></div></div></div>
    <!--Parte0, Datos generales-->
    <div ng-show="tab == 0">
    <center><h2 style="color:#467FE2">Datos Generales</h2></center>
    
    <b style="color:#FF0000">*Campos obligatorios</b><br><br>
    
    <form name="agregarUsuarioForm">
    
    
    <b>Nombre <b style="color:#FF0000">*</b></b></h5> <input ng-model="nombre" required><br><br>
    <b>Apellido <b style="color:#FF0000">*</b></b></h5> <input ng-model="apellido" required><br><br>
    <b>Sede: </b><br>
    <input type="radio" name="sede" ng-model="sede" value="Los Naranjos">Los Naranjos
    <input type="radio" name="sede" ng-model="sede" value="Centro">Centro<br><br>
    <b>Cédula de identidad <b style="color:#FF0000">*</b></b></h5> <input ng-model="ci" required><br><br>
    <br><br>
    <button ng-show="agregarUsuarioForm.$valid" class="btn btn-primary btn-md" ng-click="tab = 1" ng-click="inicio();" >Siguiente</button>
    <br><br><br><br>
    </form>
    
    </div>
    
    
    
    <!--Parte1-->
    <div ng-show="tab == 1">
    <center><h2 style="color:#467FE2"> Prueba en Línea </h2></center><br><br>
    
    <h3>Parte 1</h3><br><br>
    
    1.- Los ________________ son una secuencia de pasos lógicos para la solución de un
    problema escrita en lenguaje natural.Valor: 2 puntos<br><br>
    <input type="radio" name="respuesta" value="correcta" ng-click="count = count + 2" ng-init="count=0">Algoritmos
    <input type="radio" name="respuesta" value="incorrecta" ng-click="counterror = counterror + 10" ng-init="counterror=0">Metodos cientificos
    <input type="radio" name="respuesta" value="incorrecta" ng-click="counterror = counterror + 10" ng-init="counterror=0">Teoremas de busquedas y respuestas
    <input type="radio" name="respuesta" value="incorrecta" ng-click="counterror = counterror + 10" ng-init="counterror=0">Ninguna de las anteriores
    
    <br><br><br>
    2.- Los ________ Son difíciles de aprender y manejar ya que no resultan cercanos al ser
    humano.Valor: 2 puntos<br><br>
    <input type="radio" name="respuesta2" value="correcta" ng-click="count = count + 2">Lenguajes de bajo nivel
    <input type="radio" name="respuesta2" value="incorrecta" ng-click="counterror = counterror + 10">Lenguajes de alto nivel
    <input type="radio" name="respuesta2" value="incorrecta" ng-click="counterror = counterror + 10">Lenguajes de medio nivel
    <input type="radio" name="respuesta2" value="incorrecta" ng-click="counterror = counterror + 10">Ninguna de las anteriores
    
    <br><br><br>
    
    <br><br>
    <input type="button" value="Regresar" ng-click="tab = 0">
    <input type="button" value="Siguiente" ng-click="tab = 2">
    <br><br><br><br>
    </div>
    
    
    <!--Parte2-->
    <div ng-show="tab == 2">
    <h3>Parte 2</h3><br><br>
    3.- El lenguaje de ___________, es el que utiliza el ordenador.
    Valor: 2 puntos<br><br>
    
    <input type="radio" name="respuesta3" value="correcta" ng-click="count = count + 2">Lenguaje de bajo nivel
    <input type="radio" name="respuesta3" value="incorrecta" ng-click="counterror = counterror + 10">Lenguaje de alto nivel
    <input type="radio" name="respuesta3" value="incorrecta" ng-click="counterror = counterror + 10">Lenguaje de medio nivel
    <input type="radio" name="respuesta3" value="incorrecta" ng-click="counterror = counterror + 10">Ninguna de las anteriores
    <br><br><br><br>
    
    4.- Los _______________ son utilizados para procesar y entender ____________ de un lenguaje.
    Valor: 2 puntos<br><br>
    
    <input type="radio" name="respuesta4" value="incorrecta" ng-click="counterror = counterror + 10">Lectores USB, la estructura
    <input type="radio" name="respuesta4" value="incorrecta" ng-click="counterror = counterror + 10">Lectores de CD, el rendimiento
    <input type="radio" name="respuesta4" value="correcta" ng-click="count = count + 2">Compiladores, la codificación
    <input type="radio" name="respuesta4" value="incorrecta" ng-click="counterror = counterror + 10">Ninguna de las anteriores
    <br><br><br><br>
    
    <input type="button" value="Regresar" ng-click="tab = 1"></a>
    <input type="button" value="Siguiente" ng-click="tab = 3" ng-hide="tab == 7"></a>
    <br><br><br><br>
    </div>
    
    
    <!--Parte3-->
    <div ng-show="tab == 3">
    <h3>Parte 3</h3><br><br>
    5.- El lenguaje natural es el lenguaje hablado o escrito por humanos para propósitos
    generales de comunicación.<br><br>
    
    <input type="radio" name="respuesta5" value="correcta" ng-click="count = count + 2">Verdadero
    <input type="radio" name="respuesta5" value="incorrecta" ng-click="counterror = counterror + 10">Falso
    
    <br><br>
    6.- Un algoritmo debe ser: preciso, definido e infinito. Valor: 2 puntos.<br><br>
    
    <input type="radio" name="respuesta6" value="incorrecta" ng-click="counterror = counterror + 10">Verdadero
    <input type="radio" name="respuesta6" value="correcta" ng-click="count = count + 2">Falso
    
    <br><br>
    <input type="button" value="Regresar" ng-click="tab = 2">
    <input type="button" value="Siguiente" ng-click="tab = 4">
    <br><br><br><br>
    </div>
    
    <!--Parte4-->
    <div ng-show="tab == 4">
    <h3>Parte 4</h3><br><br>
    7.- Los algoritmos cuantitativos se refieren a algoritmos que resuelven problemas cuyo
    resultado es numérico.Valor: 2 puntos<br><br>
    <input type="radio" name="respuesta7" value="correcta" ng-click="count = count + 2" >Verdadero
    <input type="radio" name="respuesta7" value="incorrecta" ng-click="counterror = counterror + 10">Falso
    <br><br>
    8.- Un lenguaje de alto nivel son difíciles de aprender y permiten despreocuparse de la
    arquitectura del ordenador.Valor: 2 puntos<br><br>
    <input type="radio" name="respuesta8" value="incorrecta" ng-click="counterror = counterror + 10">Verdadero
    <input type="radio" name="respuesta8" value="correcta" ng-click="count = count + 2">Falso
    <br><br>
    <input type="button" value="Regresar" ng-click="tab = 3">
    <input type="button" value="Siguiente" ng-click="tab = 5">
    <br><br><br><br>
    </div>
    
    
    <!--Parte5-->
    <div ng-show="tab == 5">
    <h3>Parte 5</h3><br><br>
    9.- Un algoritmo debe ser: Valor: 2 puntos<br><br>
    <input type="radio" name="respuesta9" value="incorrecta" ng-click="counterror = counterror + 10">a) Preciso, definido e infinito
    <input type="radio" name="respuesta9" value="correcta" ng-click="count = count + 2">b) Preciso, definido y finito
    <input type="radio" name="respuesta9" value="incorrecta" ng-click="counterror = counterror + 10">c) Impreciso, definido e infinito
    <input type="radio" name="respuesta9" value="correcta" ng-click="counterror = counterror + 10">d) Impreciso, definido y finito
    
    <br><br>
    10.- Los tipos de algoritmos son: Valor: 2 puntos<br><br>
    <input type="radio" name="respuesta10" value="incorrecta" ng-click="counterror = counterror + 10"> a) De calidad y cualitativos
    <input type="radio" name="respuesta10" value="incorrecta" ng-click="counterror = counterror + 10"> b) De cantidad y cuantitativos
    <input type="radio" name="respuesta10" value="correcta" ng-click="count = count + 2"> c) Cualitativos y cuantitativos
    <input type="radio" name="respuesta10" value="incorrecta" ng-click="counterror = counterror + 10"> d) De cantidad y cualitativos
    
    <br><br>
    <input type="button" value="Regresar" ng-click="tab = 4">
    <div onclick="detenerse()"><input type="button" value="Enviar" ng-click="tab = 6" onclick="mostrar()" ></div>
    <br><br><br><br>
    </div>
    
    
    <div ng-show="tab == 6">
    <!--Resultados obtenidos-->
    
    <h1>Resultados obtenidos </h1><br><br>
    
    <strong>La nota para el usuario: <br>
    
    <div>
    {{nombre+" "+apellido}}<br>
    C.I.{{ci}}<br></div>
    Sede:.{{sede}}<br>
    <br><br>
    Es:
    <br><br>
    {{count}}/20 </strong><br><br>
    
    <b>Sobre 100 es:<br><br>
    {{(count*100)/20}}/100<br></b><br><br>
    
    <b>Ha tenido {{counterror/10}} errores</b><br><br>
    <b style="color:#467FE2">**Los errores se contaran solo si se ha seleccionado la respuesta incorrecta, si no se ha seleccionado ninguna respuesta, el error no se contará**</b><br>
    <br><br><br>
    
    <center>
    
    
    
    <div ng-show="count == 20"><b>Matrícula de Honor.</b>
    Felicitaciones, su puntuación a sido la mejor. Ha pasado la prueba satisfactoriamente sin ningun error.
    <br><br>
    </div>
    
    <div ng-show="count == 19"><b>Sobresaliente</b>
    Felicitaciones, su puntuación a sido la sobresaliente. Ha pasado la prueba satisfactoriamente, con pocos errores.
    <br><br>
    </div>
    
    
    <div ng-show="count == 18"><b>Sobresaliente</b>
    Felicitaciones, su puntuación a sido la sobresaliente. Ha pasado la prueba satisfactoriamente, con pocos errores.
    <br><br>
    </div>
    
    
    <div ng-show="count == 17"><b>Sobresaliente</b>
    Felicitaciones, su puntuación a sido la sobresaliente. Ha pasado la prueba satisfactoriamente, con pocos errores.
    <br><br>
    </div>
    
    <div ng-show="count == 16"><b>Aprobado</b>
    Felicitaciones, a aprobado. Ha pasado la prueba aunque con algunos errores. Siga así y su calificación sera mejor.
    <br><br>
    </div>
    
    <div ng-show="count == 15"><b>Aprobado</b>
    Felicitaciones, a aprobado. Ha pasado la prueba aunque con algunos errores. Siga así y su calificación sera mejor.
    <br><br>
    </div>
    
    
    
    <div ng-show="count == 14"><b>Aprobado</b>
    Felicitaciones, a aprobado. Ha pasado la prueba aunque con algunos errores. Siga así y su calificación sera mejor.
    <br><br>
    </div>
    
    
    
    <div ng-show="count == 13"><b>Aprobado</b>
    Felicitaciones, a aprobado. Ha pasado la prueba aunque con algunos errores. Siga así y su calificación sera mejor.
    <br><br>
    </div>
    
    
    
    <div ng-show="count == 12"><b>Aprobado</b>
    Felicitaciones, a aprobado. Ha pasado la prueba aunque con algunos errores. Siga así y su calificación sera mejor.
    <br><br>
    </div>
    
    
    
    <div ng-show="count == 11"><b>Aprobado</b>
    Felicitaciones, a aprobado. Ha pasado la prueba aunque con algunos errores. Siga así y su calificación sera mejor.
    <br><br>
    </div>
    
    
    
    <div ng-show="count == 10"><b>Aprobado</b>
    Felicitaciones, a aprobado. Ha pasado la prueba aunque con algunos errores. Siga así y su calificación sera mejor.
    <br><br>
    </div>
    
    
    
    
    <div ng-show="count == 9"><b>Reprobado</b>
    Usted no ha pasado la prueba. Ha tenido varios errores. Intentelo de nuevo.<br><br>
    </div>
    
    <div ng-show="count == 8"><b>Reprobado</b>
    Usted no ha pasado la prueba. Ha tenido varios errores. Intentelo de nuevo.<br><br>
    </div>
    
    <div ng-show="count == 7"><b>Reprobado</b>
    Usted no ha pasado la prueba. Ha tenido varios errores. Intentelo de nuevo.<br><br>
    </div>
    
    <div ng-show="count == 6"><b>Reprobado</b>
    Usted no ha pasado la prueba. Ha tenido varios errores. Intentelo de nuevo.<br><br>
    </div>
    
    <div ng-show="count == 5"><b>Reprobado</b>
    Usted no ha pasado la prueba. Ha tenido varios errores. Intentelo de nuevo.<br><br>
    </div>
    
    <div ng-show="count == 4"><b>Reprobado</b>
    Usted no ha pasado la prueba. Ha tenido varios errores. Intentelo de nuevo.<br><br>
    </div>
    
    <div ng-show="count == 3"><b>Reprobado</b>
    Usted no ha pasado la prueba. Ha tenido varios errores. Intentelo de nuevo.<br><br>
    </div>
    
    <div ng-show="count == 2"><b>Reprobado</b>
    Usted no ha pasado la prueba. Ha tenido varios errores. Intentelo de nuevo.<br><br>
    </div>
    
    <div ng-show="count == 1"><b>Reprobado<br>
    Usted no ha pasado la prueba. Ha tenido varios errores. Intentelo de nuevo.
    <br><br>
    </div></b>
    
    <div ng-show="count == 0"><b>Reprobado<br>
    Usted no ha pasado la prueba. No ha respondido bien niguna pregunta. Intentelo de nuevo.
    <br><br>
    </b>
    
    </div>
    
    <div id="chart_div">
    </div>
    <br><br>
    <input type="button" value="Cerrar" onclick="window.close()"><br>
    </center>
    
    
    
    </body>
    </html>

Tengo una variable tipo contador llamada "count" y tengo otra variable tipo contador igualmente llamada "counterror", las cuales las tengo pensado colocar en el gráfico. Es decir, la primera, "count" la quiero usar para que el gráfico muestre el porcentaje de las respuestas correctas, y la variable "counterror" sera entonces la variable que almacenará las respuestas erróneas. Para que sea sobre 100 (porque originalmente es sobre 20 la nota) y no me de un error en el gráfico, tengo pensado usar (count100)/20, que lo use previamente, al terminar la prueba, el resultado sobre 100. En resumen, quiero que **(count100)/20** y counterror sean las variables que estén en el gráfico. Pero el problema sería, como lograr hacer que haya un puente entre el gráfico y las variables html que estoy usando.

Allí mismo en index.html he colocado el script, porque no me corria por separado. El caso es que ya he probado esta solución: Cómo pasar un input del HTML a una variable en JavaScript. Usando product = "document.getElementById("prod").value;" al principio de la función no me ha funcionado. Agradecería mucho sus respuestas

1 respuesta 1

1

Si declaras count dentro de un controlador, entonces, deberías dibujar el gráfico en el mismo controlador o hacerla compartida mediante un servicio.

app.service('testAnalytics', function () {
    var count = 0;
    var errorCount = 0;

    return {
        getCount: function () {
            return count;
        },
        getErrorCount: function () {
            return errorCount;
        },
        setGoodAnswer: function () {
            count++;
        },
        setBadAnswer: function () {
            errorCount++;
        }
    }
});

Entonces, puedes inyectar este servicio en los controladores que quieras para gestionar los datos.

function TestController (['$scope', '$testAnalytics', function ($scope, $testAnalytics) {
    ...
    $testAnalytics.setGoodAnswer();
    ...
}]);

function GraphController ('$scope', '$testAnalytics', function ($scope, $testAnalytics) {
    // dibujas la gráfica
}]);

Otra opción más sencilla es usar sessionStorage para guardar localmente las respuestas.

var count = sessionStorage.getItem('count');
sessionStorage.setItem('count', count + 1);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.