¿Cómo evaluar respuesta de imagen?

Question

La evaluación con problemas planteados y sus respectivas opciones de respuesta de solo texto funciona sin inconvenientes por ejemplo:

a1     a2     a3     a4     answer
1/9    19/5   12/1  1/4      19/5

Las columnas a1, a2, a3, a4 son las opciones y la columna answer tiene la respuesta correcta, mediante JSON se genera esta información:

[
    'name'         => 'respuesta_1',
    'question'     => 'Planteamiento del problema?',
    'alternatives' => [1/9, 19/5, 12/1, 1/4],
    'answer'    => 19/5,
],

Donde sí selecciono la opción correcta 19/5 este me califica tal cual ganándome 1 punto.

Pero ya en el caso donde existen opciones donde no puedo agregar texto si no imágenes en las columnas a1, a2, a3, a4, el código PHP no puede detectar si es o no la opción seleccionada correcta o incorrecta es más aún así cuando se ha seleccionado la respuesta de imagen correcta esta la evalúa como incorrecta.

Por ejemplo, en este caso de imagen, yo tenía los siguientes datos registrados:

a1
<img src="https://i.imgur.com/HdfyxwC.png" width="18">
a2
<img src="https://i.imgur.com/4QIRf6R.png" width="18">
a3
<img src="https://i.imgur.com/fSNMF2l.png" width="18">
a4
<img src="https://i.imgur.com/DMTiaxk.png" width="18">
answer
<img src="https://i.imgur.com/fSNMF2l.png" width="18">

Como puedo solucionar este problema de evaluación, me pueden explicar como puedo hacer para que el calificador funcione tanto para texto como para imagen.

El código PHP que realiza esta evaluación es el siguiente:

results-evaluations.php

    $sql = "SELECT * FROM quiz";
    $result = $con->query($sql);

    while($row = mysqli_fetch_assoc($result)) {
        $answers[] = [
            'name' => 'respuesta_'.$row["id_question"],
            'question' => $row["question"],
            'alternatives' => [$row["a1"], $row["a2"],$row["a3"],$row["a4"]],
            'answer' => $row["answer"]
        ];
    }

    $questions = [];

    foreach($answers as $index => $answer) {
        $questions[]=$answer;
        $questions[$index]['answer']=null;
    }

 $final=[];
// Hay que evaluar
if(isset($_POST['student'])) {
    $student = $_POST['student'];

    $result=[];
    $qualify_score = 0;
    $top_score = sizeof($answers);

    foreach($answers as $index => $answer) {
        $result_quote=['index'=>$index]; 
        $result_quote['question']=$answer['question']; 
        $result_quote['your_answer']=isset($_POST[$answer['name']])? $_POST[$answer['name']] : 'N/A';
        $result_quote['correct_answer']= $answer['answer'];
        $result_quote['qualify_score']=($result_quote['your_answer']==$result_quote['correct_answer'])? 1:0;

        $qualify_score+=$result_quote['qualify_score'];
        $result[]=$result_quote;

    }
    $final=[
        'student'=>$student,
        'result'=>$result,
        'qualify_score'=>$qualify_score.' / '.$top_score
    ];

}
echo json_encode($final);

Por el momento entiendo que le código esta vulnerable, esto lo solucionare más adelante en la materia a orientados a objetos y seguridad.

Answer 1

Jacks aquí te dejo un ejemplo, a ver si se entiende mejor lo que quiero explicarte.

La lógica que se sigue es muy simple. Yo voy a usar de forma inteligente los id de cada elemento para identificar si se trata de un texto (txt) o de una imagen (img). Al pulsar en el botón mi código JS crea una variable data que podría ser enviada al servidor.

Por ejemplo, si se selecciona la opción B en texto y la opción C en imagen, vamos a enviar esta info al servidor:

{
  "respuestas": [
    "txt2",
    "img3"
  ]
}

Simplemente por la nomenclatura, ya sabremos que:

• la respuesta uno es del tipo texto y corresponde a a2, por algo tiene el id txt2 ...
• la respuesta dos es del tipo imagen y corresponde a a3, por algo tiene el id img3 ...

Con esos datos, el servidor ya sabrá como tiene que trabajar.

No sé si es exactamente ese tu escenario, pero la respuesta muestra una forma de usar nuestros identificadores inteligentemente para saber el tipo de elemento que se está pulsando y a qué respuesta corresponde.

var btnEnviar = document.getElementById('btnEnviar');
btnEnviar.onclick = function() {
  var txtRadio = document.querySelector('input[name = "txt"]:checked').id;
  var imgRadio = document.querySelector('input[name = "img"]:checked').id;
  var data = {
    respuestas: [txtRadio, imgRadio]
  };
  console.log(data);
};

.question-img {
  vertical-align: middle;
  margin-bottom: 5px;
}

<div>
  <p><b>Seleccione (texto):</b></p>

  <input type="radio" id="txt1" name="txt" value="1/9" checked />
  <label for="txt1">A) 1/9</label> <br />

  <input type="radio" id="txt2" name="txt" value="19/5" />
  <label for="txt2">B) 19/5</label> <br />

  <input type="radio" id="txt3" name="txt" value="12/1" />
  <label for="txt3">C) 12/1</label> <br />

  <input type="radio" id="txt4" name="txt" value="1/4" />
  <label for="txt4">D) 1/4</label> <br />
</div>


<div>
  <p><b>Seleccione (imagen):</b></p>

  <input type="radio" id="img1" name="img" value="9/50" checked />
  <label for="img1">A) <img class="question-img"  src="https://i.imgur.com/HdfyxwC.png" width="18"></label> <br />

  <input type="radio" id="img2" name="img" value="19/50" />
  <label for="img2">B) <img class="question-img"  src="https://i.imgur.com/4QIRf6R.png" width="18"></label> <br />

  <input type="radio" id="img3" name="img" value="9/19" />
  <label for="img3">C) <img class="question-img"  src="https://i.imgur.com/fSNMF2l.png" width="18"></label> <br />

  <input type="radio" id="img4" name="img" value="10/19" />
  <label for="img4">D) <img class="question-img"  src="https://i.imgur.com/DMTiaxk.png" width="18"></label> <br />
</div>
<hr />
<button id="btnEnviar">Enviar</button>