matrix

by cory a

HTML

<table class="table matrix">
  <tr>
    <th></th>
    <th>Metacognitive</th>
    <th>Procedural</th>
    <th>Conceptual</th>
    <th>Factual</th>
  </tr>
  <tr id="rem">
    <td >Remember</td>
      <td class="meta">click</td>
    <td class="pro">click</td>
    <td class="con">click</td>
    <td class="fact">click</td>
  </tr>
  <tr id="und">
    <td>Understand</td>
     <td class="meta">click</td>
    <td class="pro">click</td>
    <td class="con">click</td>
    <td class="fact">click</td>
  </tr>
  <tr id="apply">
    <td>Apply</td>
    <td class="meta">click</td>
    <td class="pro">click</td>
    <td class="con">click</td>
    <td class="fact">click</td>
  </tr>
  <tr id="ana">
    <td>Analyze</td>
    <td class="meta">click</td>
    <td class="pro">click</td>
    <td class="con">click</td>
    <td class="fact">click</td>
  </tr>
  <tr id="eval">
    <td>Evaluate</td>
          <td class="meta">click</td>
    <td class="pro">click</td>
    <td class="con">click</td>
    <td class="fact">click</td>
  </tr>
      <tr id="create">
    <td>Create</td>
    <td class="meta">click</td>
    <td class="pro">click</td>
    <td class="con">click</td>
    <td class="fact">click</td>
  </tr>
</table>
<div id="popModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">ICT Learning Objective</h4>
      </div>
        <div class="modal-body">
            <h5>Write your ICT objective for this curriculum. Be sure to consider identified cognitive processes and knowledge domain. </h5>
            <p>Student can use technology to 
                <span class="form-group">
                    <select id="wordDrop" >

                   ...

CSS

.matrix td {
    cursor: pointer;
}
td {
    text-align: center;
}

JavaScript

$(".matrix td").click(function(){
    $("#wordDrop").html("")
    var knw = $(this).attr("class") 
    var cog = $(this).closest("tr").attr('id')
    var wordList = ""
    switch(knw) {
        case "meta":
            $(".knw").html(metaKnw)
            break;
       case "pro":
            $(".knw").html(proKnw)
            break;
        case "con":
            $(".knw").html(conKnw)
            break;
        case "fact":
            $(".knw").html(factKnw)
            break;
    }
    
    switch(cog) {
    case "rem":
        wordList = remWords
        break;
    case "und":
        wordList = undWords
        break;
    case "apply":
        wordList = applyWords
        break;
    case "ana":
        wordList = analyzeWords
        break;
    case "eval":
        wordList = evalWords
        break;
    case "create":
        wordList = createWords
        break;
    
   }
     var textArr = wordList.split(" ");
    $.each(textArr, function (k, v) {
        $("#wordDrop").append("<option>"+v+"</option>")
    });
    
    $("#popModal").modal("show")
});

$("#wordDrop").change(function () {
    $("#ICTout").val("Student can use technology to " + $(this).val())
});
var remWords = "collect copy define describe examine find group identify indicate label list locate match memorize name omit observe point provide quote read recall repeat recite recognize repeat reproduce say select sort spell state tabulate tell touch underline repetition"

var undWords = "alter arrange associate calculate categorize category change communicate comprehension comprehend convert expand explain inform alternatives alternate outline paraphrase rearrange reconstruct relate restate sum summarize meaning translate understand understanding verbalize write"

var applyWords = "acquire adopt apply assemble capitalize construct consume demonstrate develop discuss experiment execute implement form formulate make manipulate organize relate report search show solve consequences try use...