I have a problem with my html code using angular js, the fact is that I want to pass a variable called "count" that belongs to the note that a student took in an online test, which accumulates as the Student is having the correct answers. The problem is that in the end, I want to place a graphic, I searched for the Google API ( link ), and I found a code which I put in my html. The fact is that I do not know how to do so that the variable of the online test that is the student's grade, is read in the javascript code. In fact I've tried it in different ways, no one works.
This is what I have in 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>
I have a variable type counter called "count" and I have another counter type variable also called "counterror", which I have planned to put on the chart. That is, the first, "count" I want to use it so that the graph shows the percentage of the correct answers, and the variable "counterror" will then be the variable that will store the erroneous answers. So that it is over 100 (because it is originally over 20 the note) and I do not get an error in the graph, I plan to use (count * 100) / 20, which I used previously, upon finishing the test, the result over 100. In summary, I want (count * 100) / 20 and counterror to be the variables that are in the graph. But the problem would be, how to make a bridge between the graphic and the html variables that I am using.
Right there in index.html I placed the script, because I did not run separately. The fact is that I have already tried this solution: How to pass an HTML input to a variable in JavaScript . Using product="document.getElementById (" prod "). Value;" at the beginning of the function did not work for me. I would greatly appreciate your answers