Las pregunta compuesta tambien pueden ser interactivas (o viceversa). El motivo para que una pregunta interactiva tenga como base una pregunta compuesta es poder llevar a cabo dos evaluaciones completamente diferentes de la respuesta del alumno.¹⁾.

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 pregunta cabecera se ha implementado la interactividad mediante una pregunta generativa en JSP para seleccionar aleatoriamente las imagenes (no se muestra el código para simplificar) y código en jQuery y estilos CSS:

<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>

Se comprobarán dos cosas, cada una en la correspondiente 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.

En cada una de las subpreguntas se ha escrito una 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:

<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>   

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

En el segundo caso, interesa el orden de las imágenes seleccionadas, lo que se implementa mediante la siguiente funcion evaluacion() ²⁾:

<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>

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.

Cuando la pregunta se presenta al alumno, solo se mostrará la parte correspondiente al enunciado de la pregunta cabecera

Una vez corregida el propio ítem base muestra la corrección al alumno:

En caso de implementar la función resolver y la función solucion, se incluirían dentro del código del enunciado de la pregunta base, ya que la solución es común.