0

tengo problemas para resolver este ejercicio que es un test. Lo que quiero hacer es que contabilice cuantas veces se marco la letra a,b,c,d de todas las pregunta y que se muestre en un gráfico, me recomendaron usar chart.js para el gráfico. Se los agradecería si me ayudan, soy nuevo en la carrera. Que tengan buen día.

html:



<div class="container">
    <h2>Encuesta</h2>
        <h4>1. ¿Cómo se ve tu piel en este momento?</h4>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio"> Lisa y con brillo natural, no oleoso
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio"> Algo opaca y seca
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio"> Me brilla toda la cara
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio"> Algunas zonas están brillosa y otras
                seca
            </label>
        </div>
        <br>
        <h4>2. ¿Cómo son tus poros?</h4>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio"> Finos y poco visible
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio"> Casi imperceptibles
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio"> Son grandes y visibles en todas partes
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio"> Son grandes en mentón, nariz y/o frente
            </label>
        </div>
        <br>
    </div>
1
  • 1
    Qué has intentado? Tal vez este enlace te pueda ayudar a obtener una respuesta
    – Arriel
    Commented el 19 sept. 2021 a las 4:07

1 respuesta 1

1

Para resolver tu problema puedes hacer lo siguiente. Etiquetar cada uno de los inputs radio con una clase correspondiente a su valor a, b, c o d. Luego agregar un botón contar, que al hacer click, ejecute una función que cuente cuantas de las diferentes clases están seleccionadas. Esta función podría ser algo así:

function contarRespuestas() {
  //Inicias la grafica con todos los valores en cero
  for (let index = 0; index < 4; index++) {
    myChart.data.datasets[0].data[index] = 0;}

  // Cuentas cuantas veces está marcada cada opcion y lo seteas en el grafico
  ['a', 'b', 'c', 'd'].forEach((option,i) => {
  document.querySelectorAll(`.${option}`).forEach(checkbox => {
    if(checkbox.checked){
      myChart.data.datasets[0].data[i] += 1
    }
  })
  myChart.update()
})
}

Esta simplemente va a seleccionar todas las clases a y va a contar cuantas están seleccionadas, todas las clases b y contará las seleccionadas, y así sucesivamente. Estos valores los actualizará en el gráfico de chart.js y se mostrarán en pantalla.

Te adjunto un ejemplo funcional:

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['a', 'b', 'c', 'd'],
        datasets: [{
            label:'Respuestas',
            data: [0, 0, 0, 0],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    }
});

function contarRespuestas() {
  for (let index = 0; index < 4; index++) {
myChart.data.datasets[0].data[index] = 0;
  }
  ['a', 'b', 'c', 'd'].forEach((option,i) => {
  document.querySelectorAll(`.${option}`).forEach(checkbox => {
if(checkbox.checked){
  myChart.data.datasets[0].data[i] += 1
}
  })
  myChart.update()
})
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<div class="container">
    <h2>Encuesta</h2>
        <h4>1. ¿Cómo se ve tu piel en este momento?</h4>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input a" name="optradio1"> Lisa y con brillo natural, no oleoso
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input id='radio1' type="radio" class="form-check-input b" name="optradio1"> Algo opaca y seca
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input id='radio2' type="radio" class="form-check-input c" name="optradio1"> Me brilla toda la cara
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input id='radio3' type="radio" class="form-check-input d" name="optradio1"> Algunas zonas están brillosa y otras
                seca
            </label>
        </div>
        <br>
        <h4>2. ¿Cómo son tus poros?</h4>
        <div class="form-check">
            <label class="form-check-label">
                <input id='radio4' type="radio" class="form-check-input a" name="optradio2"> Finos y poco visible
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input id='radio5' type="radio" class="form-check-input b" name="optradio2"> Casi imperceptibles
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input id='radio6' type="radio" class="form-check-input c" name="optradio2"> Son grandes y visibles en todas partes
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input id='radio7' type="radio" class="form-check-input d" name="optradio2"> Son grandes en mentón, nariz y/o frente
            </label>
        </div>
        <br>
    </div>
  <div style="width: 100%; max-width: 500px; margin:auto">
  <button onclick="contarRespuestas()">Contar</button>
  <canvas id="myChart"></canvas>
 </div>

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.