0

Estoy intentando realizar una especie de quiz de tipo opción múltiple con única respuesta. Cargo la pregunta y sus opciones (respuestas) con datos REST.

Así es como debería verse la vista:

introducir la descripción de la imagen aquí

Por cada pregunta (header en negrilla) debe haber una lista de preguntas (4 preguntas) y debo poder seleccionar al menos una opción en cada pregunta.

Actualmente, no puedo lograrlo en la app en ionic en la que trabajo, sólo me deja seleccionar una respuesta de entre todas las preguntas del test y cuando selecciono otra, se des-selecciona la que había seleccionado, aún estando en otra pregunta...:

introducir la descripción de la imagen aquí

Aquí dejo el código de la vista y controlador:

controllers.js

for (var i = 0; i < $scope.questions.length; i++) {
  if ($scope.questions[i].opcion_multiple == 'si') {
    $scope.multiple = true;
    $scope.multiple_questions[i] = {
      id: $scope.questions[i].id_pregunta,
      question: $scope.questions[i].nombre,
      options: [
        $scope.questions[i].opcion_a,
        $scope.questions[i].opcion_b,
        $scope.questions[i].opcion_c,
        $scope.questions[i].opcion_d
      ],
      option_value: ['a', 'b', 'c', 'd']
    };
  }
}

test.html

<ion-view view-title="Evaluación">
  <ion-content>
    <ion-list ng-repeat="multiple_question in multiple_questions">
      <ion-item>
        <h3 ng-bind-html="multiple_question.question">
          {{multiple_question.question}}
        </h3>
          <ion-radio ng-repeat="option in multiple_question.options"
          ng-model="multiple_question.id"
          ng-value="multiple_question.option_value[$index]">{{option}}</ion-radio>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

EDIT: No he sabido... qué valor darle al ng-model para este tipo de aplicación

2
  • Bueno entiendo lo que quieres decir, y aunque trabaje angular e ionic aun estoy nuevo al ver ciertos codigos, mira este ejemplo, hice una pregunta, por lo que veo es que no estas independizando cada lista, mira este ejemplo una pregunta que hice Commented el 8 jul. 2016 a las 2:15
  • Igual estoy preparando una respuesta, dame un segundo Commented el 8 jul. 2016 a las 2:38

2 respuestas 2

1

Ya analice un poco tu pregunta, y con lo que pude ver entre tu pregunta y el ejemplo que está en la página de ionic que lo replique en un plnkr, es que al menos, estas usando un mismo value para todas tus opciones, ya que veo que en ng-value colocas ng-value="a", y como el ejemplo que da la misma documentación en ionic.

Tampoco ve como viene tu objeto del servidor, de igual forma te dejo el ejemplo de la documentación por aquí, para que lo analices, ya que el único error que veo es que estas usando un mismo value para todo.

Ejemplo

$scope.clientSideList = [
{ text: "Backbone", value: "bb" },
{ text: "Angular", value: "ng" },
{ text: "Ember", value: "em" },
{ text: "Knockout", value: "ko" }
]; 

 $scope.serverSideList = [
    { text: "Go", value: "go" },
    { text: "Python", value: "py" },
    { text: "Ruby", value: "rb" },
    { text: "Java", value: "jv" }
  ];
11
  • Ese ejemplo ya lo había visto. Justamente cometí el error de dejar ng-value='a' debido a que estaba haciendo unas pruebas y olvidé cambiarlo. Acabo de actualizar la pregunta. Necesito que se lean los valores a, b, c y d para cada preguntar, así que creé un array y le asigno el valor a cada radio input. Miraré nuevamente el ejemplo que colocaste para intentar hayar la solución. Aquí otro en el que me estaba fijando...: plnkr.co/edit/eqMqO1?p=preview
    – roadev
    Commented el 8 jul. 2016 a las 3:56
  • Bueno me alegra que te alla servido lo que te comente, de igual forma, ya vi el ejemplo que pusiste, esta bien Commented el 8 jul. 2016 a las 4:24
  • Aún no lo logro hacer funcionar como debe.... Dejando el ng-value como lo dejé al editar la pregunta... No sé qué más pueda ser :/ Mirando otros ejemplos... en teoría debería funcionar, he probado cambiando el np-repeat de lugar (con etiquetas más externas o internas) y nada :(
    – roadev
    Commented el 8 jul. 2016 a las 14:31
  • 1
    @roadev puse la pregunta en el chat, alli hay alguien que siempre sabe, esperemos que aparezca hoy por aqui, el seguro te dara una mano, seguro que si, de igual forma aqui te dejo el enlace del chat, enace del chat Commented el 8 jul. 2016 a las 15:56
  • Aparentemente es por la iteración de las diferentes preguntas, ya que agarra las preguntas y respuesta del mismo arreglo pero en diferente posición... Según ese ejemplo que colocaste, ellos consumen de dos arrays diferentes.
    – roadev
    Commented el 9 jul. 2016 a las 19:07
1

Por fin pude resolver este problema. La solución está en el uso de <ion-list> y <ion-item> (Es decir, no utilizarlas...)

Por alguna razón (que aún investigo...), al usar esas etiquetas, no podia seleccionar una respuesta por pregunta, sino una de entre el total de preguntas de la vista.

Finalmente opté por el uso de etiquetas <ul> y <li>

El código que tengo en la vista y con el cuál funciona es:

test.html

<ion-view view-title="Evaluación">
  <ion-content>
    <ul>
      <li ng-repeat="question in questions">
        <h3 ng-bind-html="question.questionText " >{{ question.questionText }}</h3>
        <h4>Selección: {{data[$index]}}</h4>
        <ul>
          <li ng-repeat="answer in question.answers">
            <ion-radio ng-model="data[$parent.$index]" ng-value="answer"
              name="quest_{{$parent.$index}}_answers" >
              {{ answer }}
            </ion-radio>
          </li>
        </ul>
      </li>
    </ul>
  </ion-content>
</ion-view>

introducir la descripción de la imagen aquí

2
  • 1
    me alegra mucho, algo me decia ue aprte de ng-value, era algo asi, por que a mi me paso con los ion-item, en mi proyecto, espero sigas adelante, de antemano pregunto, es algun proyecto personal, o de tus estudios. Commented el 11 jul. 2016 a las 15:50
  • Gracias :) Es un proyecto de un semillero de investigación de la Universidad.
    – roadev
    Commented el 11 jul. 2016 a las 16:54

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.