===== Preguntas interactivas compuestas =====

Las [[es:manual:items:compuestos|pregunta compuesta]] tambien pueden ser interactivas (o viceversa). El motivo para que una pregunta interactiva tenga como [[es:manual:items:interactivos#item base|base]] una [[es:manual:items:compuestos|pregunta compuesta]] es poder llevar a cabo dos evaluaciones completamente diferentes de la respuesta del alumno.((Muchas veces puede conseguirse el mismo egfecto con preguntas interactivas que tengan como base un [[es:manual:items:tiposbasicos:respuesta_libre
|ítem de respuesta libre]] con varias opciones de respuesta)).

==== Ejemplo ====

Por ejemplo, la siguiente pregunta compuesta requiere que el alumno usando el ratón selecione y mueva las imagenes de unos cuadros a un área situandolas en orden. 

Para ello se ha definido una pregunta interactiva compuesta. En el enunciado de la  [[es:manual:items:compuestos#pregunta cabecera]] se ha implementado la interactividad mediante una [[es:manual:items:generativos:jsp|pregunta generativa en JSP]] para seleccionar aleatoriamente las imagenes (no se muestra el código para simplificar) y código en [[https://jquery.com|jQuery]] y estilos [[https://developer.mozilla.org/es/docs/Web/CSS|CSS]]: 


<code html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Selecciona de entre estos cuadros y ordena cronologicamente aquellos correspondientes 
a PINTORES ESPA&Ntilde;OLES de izquierda (mas antiguo) a derecha (mas reciente)<br/><br/>

<%
---
%>
     
<center>
<ul id="sortable1" class="connectedSortable">
</ul>
    
<ul id="sortable2" class="connectedSortable">
  <% for(int i = 1; i <= n ; i++) { %>
    <li class="ui-state-default" id="li-<%= i %>">
        <img class="img-responsive" 
                     country="<%= country[i-1].intValue() %>" 
                     src="<%= image[i-1] %>" 
                     height="150" 
                     style="cursor:move;" 
                     name="<%= name[i-1] %>" 
                     id ="<%= name[i-1] %>"
         >
    </li>
  <% } %>
</ul>
</center>

<script language="javascript">
    var limiteItems = 4;
    $( function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".connectedSortable",
            receive: function(event, ui) {
                if ($(this).attr('id') == "sortable1" && $(this).children().length > limiteItems ) {
                    $(ui.sender).sortable('cancel');
                }
            }
        }).disableSelection();
    });

</script>

<style>    
    #sortable1{ height: 156px; }
    #sortable2{ height: 312px; }
    #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; width: 100%; border: 1px solid #c6c6c6; margin-bottom: 10px; }
    #sortable1 li, #sortable2 li { margin: 3px; float: left; font-size: 4em; text-align: center; max-height: 150px; }
    #sortable1 li img, #sortable2 li img { max-height: 150px; }
</style>

</code>

Se comprobarán dos cosas, cada una en la correspondiente [[es:manual:items:compuestos#subpreguntas|subpregunta]]: (1) Que haya seleccionado las 3 imagenes de pinturas de autores españoles; y (2) Que las imagenes estén ordenadas siguiendo un orden cronológico.

{{ es:manual:items:item-compuesto-interactivo-1.png?400 }}

En cada una de las [[es:manual:items:compuestos#subpreguntas|subpreguntas]] se ha escrito una [[es:manual:items:interactivos:evaluacion#función evaluacion()]] que una vez terminada la interacción devuelve los valores que interesan en cada caso. En el primero de ellos es simplemente el número de imágenes seleccionadas correctamente correspondientes a pintores españoles:

<code javascript>
<script>
   function evaluacion() {
    console.log("evaluacion 1");
    var sortedIDs = $( "#sortable1" ).sortable( "toArray" );
    var respuesta= 0;
    $.each(sortedIDs,function(i,e){
        respuesta += +$( "#"+e ).children().attr('country');
    });
     return respuesta;
   }
</script>   
</code>

Los patrones de respuesta del correspondiente ítem base son solo números del 0 al 3, con credito parcial para la respuesta 2:

{{ es:manual:items:item-compuesto-interactivo-5.png?400 }}

En el segundo caso, interesa el orden de las imágenes seleccionadas, lo que se implementa mediante la siguiente funcion evaluacion() ((Siette renombra de forma automática los nombres de las [[es:manual:items:interactivos:evaluacion#funcion evaluacion|funciónes de evaluación]] con lo que simplifica la interfaz con el programador de ítem interactivos que solo tiene que usar siempre el mismo nombre para las funciones de las [[es:manual:items:compuestos#subpreguntas|subpreguntas]])):

<code javascript>
<script>
   function evaluacion() {
    console.log("evaluacion 2");
    var sortedIDs = $( "#sortable1" ).sortable( "toArray" );
    var respuesta= "";
    $.each(sortedIDs,function(i,e){
        respuesta += $( "#"+e ).children().attr('name') + " - ";
    });
     respuesta = respuesta.slice(0,-3);
     return respuesta;
   }
</script>
</code>

En este caso los aptrones que recogen la respuesta, capturan las 6 posibles combinaciones de respuestas en el caso de que los cuadros seleccionados fuesen correctos, pero el orden no. 

{{ es:manual:items:item-compuesto-interactivo-4.png?400 }}

Cuando la pregunta se presenta al alumno, solo se mostrará la parte correspondiente al enunciado de la [[es:manual:items:compuestos#pregunta cabecera]]

{{ es:manual:items:item-compuesto-interactivo-2.png?400 }}

Una vez corregida el propio [[es:manual:items:interactivos#ítem base]] muestra la corrección al alumno:

{{ es:manual:items:item-compuesto-interactivo-3.png?400 }}

En caso de implementar la [[es:manual:items:interactivos:evaluacion#función resolver]] y la [[es:manual:items:interactivos:evaluacion#función solucion]], se incluirían dentro del código del enunciado de la pregunta base, ya que la solución es común.