Modelo de entrevista

Modelo propuesto para una revision de entrevista

El modelo de una entrevista mencionado en el caso de uso 4 tiene esta estructura:

{
  interview: 34,
  start: '2001-12-14T21:59:43.10-03:00',
  stop: '2001-12-14T22:11:02.35-03:00',
  tags: [
    {
      ref: 1,
      time: '2001-12-14T22:00:18.15-03:00'
    },
    {
      ref: 5,
      time: '2001-12-14T22:03:21.33-03:00'
    },
    {
      ref: 2,
      time: '2001-12-14T22:04:02.22-03:00'
    },
    {
      ref: 3,
      time: '2001-12-14T22:04:02.43-03:00'
    },
    {
      ref: 5,
      time: '2001-12-14T22:07:41.56-03:00'
    }
  ]
}

Es decir, este es el resultado de una entrevista. Tiene una referencia interview que suponemos va a ser una simple manera de identificarla entre otras. Tiene un Date de inicio y otro de fin. Por ultimo tiene un array de tags que guardan referencia a la pregunta contestada y un Date para calcular en que momento de la grabacion fue contestada.

Podemos inferir entonces que el modelo de la entrevista es algo asi:

{
  nombre: 'Curso Phonegap',
  preguntas: {
    1: "Preséntese y cuénteme por qué quiere hacer el curso de Phonegap",
    2: "Nombre",
    3: "Edad",
    4: "Conocimientos previos",
    5: "Experiencia en mobile",
    6: "Experiencia general"
  }
}

Con este modelo tentativo ya podemos iterar para generar la lista de nuestra interfaz.

Vamos a generar una funcion en el archivo www/js/index.js que nos devuelva esta estructura:

function crearGuia() {
  var guia = {
    nombre: 'Curso Phonegap',
    preguntas: {
      1: {texto: "Preséntese y cuénteme por qué quiere hacer el curso de Phonegap"},
      2: {texto: "Nombre"},
      3: {texto: "Edad"},
      4: {texto: "Conocimientos previos"},
      5: {texto: "Experiencia en mobile"},
      6: {texto: "Experiencia general"}
    }
  };
  return guia;
}

Con la misma metodologia vamos a crear una funcion que devuelva el modelo de una entrevista para revision:

function crearEntrevista(){
  var entrevista = {
    interview: 34,
    start: '2001-12-14T21:59:43.10-03:00',
    stop: '2001-12-14T22:11:02.35-03:00',
    tags: [
      {
        ref: 1,
        time: '2001-12-14T22:00:18.15-03:00'
      },
      {
        ref: 5,
        time: '2001-12-14T22:03:21.33-03:00'
      },
      {
        ref: 2,
        time: '2001-12-14T22:04:02.22-03:00'
      },
      {
        ref: 3,
        time: '2001-12-14T22:04:02.43-03:00'
      },
      {
        ref: 5,
        time: '2001-12-14T22:07:41.56-03:00'
      }
    ]
  }
  return entrevista;
}

Con estas 2 funciones podemos generar tanto el modelo de la entrevista como un ejemplo de esa misma entrevista para revision.

Inicializacion e iteracion

Si bien removimos los estilos de jQuery Mobile todavia tenemos toda la funcionalidad aplicada. La pagina que estamos usando es #home. Vamos a agregar un handler cuando jQuery cree la pagina.

Por ser un event handler, este puede estar fuera de la funcion init(). Se ejecutara cuando se dispare el evento pagecreate. Dentro vamos a llamar a nuestras funciones para poder iterar:

  $('#home').on('pagecreate', function(e){
    //creamos el modelo de datos
    var guia = crearGuia();

    //seleccionamos el div con id=respuestas
    var container = $('div#respuestas', this);

    //lo vaciamos
    container.empty();

    //creamos una entrevista para revision
    var respuestas = crearEntrevista();

    $.each(guia.preguntas, function(i,e){
      //creamos un div
      var div = $('<div />');
      //le asignamos el texto de la pregunta
      div.append(e.texto);
      //y lo agregamos al container (div#respuestas)
      container.append(div);
    });
  });

Actualizamos la pagina en el browser y deberiamos ver la lista de preguntas generada automagicamente.

Ahora tenemos que ir agregando la funcionalidad y los botones.

Botones para marcar

Delante del texto de cada pregunta tenemos que agregar un boton con (por ahora) un signo + que luego agregara el tag en el momento que lo llamemos. Vamos a crear otra funcion (al mismo nivel que las anteriores que agregamos) que devuelva este boton:

function createTagButton(ref){
  var button = $('<button />');
  button.text('+')
  button.click(function(e){
    console.log('agregar tag ' + ref + ' en ' + new Date());
  });
  return button;
}

Esta funcion recibe como parametro la referencia a la pregunta. Si vemos la iteracion:

$.each(guia.preguntas, function(i,e) {...});

las variables que recibe la funcion iteradora son i y e, que representan el key/value de guia.preguntas:

preguntas: {
  1: {texto: "Preséntese y cuénteme por qué quiere hacer el curso de Phonegap"},
  2: {texto: "Nombre"},
  3: {texto: "Edad"},
  4: {texto: "Conocimientos previos"},
  5: {texto: "Experiencia en mobile"},
  6: {texto: "Experiencia general"}
}

entonces i tendra el key (1,2,3,4,5,6) y e tendra los valores correspondientes a las preguntas. Volviendo a nuestra iteracion:

    $.each(guia.preguntas, function(i,e){
      //creamos un div
      var div = $('<div />');

      //creamos y agregamos el boton, pasando i como referencia
      div.append( createTagButton(i) );

      //le asignamos el texto de la pregunta
      div.append(e.texto);
      //y lo agregamos al container (div#respuestas)
      container.append(div);
    });

Verifiquen el codigo y vuelvan a actualizar la pagina en el browser para ver los cambios.

Array.filter

Para entender el siguiente paso tenemos que conocer la funcion Array.filter

Array.filter devuelve un array filtrando items del array sobre el que se ejecuta basandose en una funcion. La funcion recibe cada item del array y debe devolver true o false. Si devuelve true el item pasa el filtro y es incluido en el array que se devuelve. Este metodo no modifica el array sobre el cual se ejecuta, devuelve un nuevo array con los items filtrados

Ejemplo:

function mayoresQue10(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(mayoresQue10);
// filtered es [12, 130, 44]

Para que lo necesitamos? Porque en nuestra iteracion estaremos pasando por cada una de las preguntas de la entrevista y en cada una vamos a necesitar filtrar de las respuestas (tags) las que corresponden a esa pregunta para generar los botones necesarios.

Botones para ir a las respuestas

Al igual que antes hicimos una funcion que nos devolviera un boton para marcar la respuesta, ahora haremos una funcion que nos devuelva un boton para ir al momento especifico:

function createSeekButton(time){
  var button = $('<button />')
    .text('Go!')
    .click(function(e){
      console.log('reproducir desde '+time);
    });
  return button;
}

Entonces, volviendo a la funcion de inicializacion, cuando iteramos por sobre las preguntas extraemos del array de tags los tags que corresponden a cada pregunta:

  $('#home').on('pagecreate', function(e){
    //creamos el modelo de datos
    var guia= crearGuia();

    //seleccionamos el div con id=respuestas
    var container = $('div#respuestas', this);

    //lo vaciamos
    container.empty();

    //creamos una entrevista para revision
    var respuestas = crearEntrevista();

    $.each(guia.preguntas, function(i,e){
      //creamos un div
      var div = $('<div />');

      //creamos y agregamos el boton, pasando i como referencia
      div.append( createTagButton(i) );

      //le asignamos el texto de la pregunta
      div.append(e.texto);

      var tags = respuestas.tags.filter(function(tag){
        //devolvemos true solo si el tag.ref es igual
        //al key de la pregunta
        return tag.ref == i;
      });
      //y ahora que tenemos el array tags, iteramos
      $.each(tags, function(ii,ee){
        //creamos el boton y lo agregamos al div
        div.append( createSeekButton(ee.time) );
      });

      //y lo agregamos al container (div#respuestas)
      container.append(div);
    });
  });
}

Una vez mas, actualizamos la pagina y vemos los cambios.

Si todo esta bien hasta aca, podemos avanzar y agregar la funcionalidad de la revision