<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>How To Do Activities I</title>

<meta http-equiv="Content-Type"        content="text/html; utf-8" />
<meta http-equiv="Content-Language"    content="en" />
<meta http-equiv="Cache-Control"       content="no-cache" />
<meta http-equiv="pragma"              content="no-cache" />
<meta http-equiv="Expires"             content="0" />
<meta name="Author"                    content="DLIFLC" />
<meta name="Robots"                    content="noindex" />

<style type="text/css" id="id_css1">
/*-------------------------------------------------------------------------*/
body
  {
  background-color            : #EFEFE7;
  font-family                 : Arial,Verdana;
  margin-top                    :6px;
  margin-left                    :6px;
  }
.over_title
  {
  font-weight        : bold;
  color              : #5D7865;
  }
.btn
  {
  background-color   : #FEFEFE;
  cursor             : pointer;
  color              : #575A43;
  text-align         : center;
  font-size          : 80%;
  font-family        : Arial;
  font-weight        : bold;
  }
.txt_bg
  {
  background-color   : #DEE7D6;
  }
.txt_bg2
  {
  background-color   : #F7FBEF;
  }
.dragged
  {
  color              : cccccc;
  text-decoration    : line-through;
  }/*-------------------------------------------------------------------------*/
</style>

<script language="JavaScript">
//=========================================================================
 
function spf( s, t )
  {
  var i = 0
  while (s.indexOf('~')+1)
    s = s.replace(/~/, t[i++])
  return s
  } 
 
function w_class()
  {
  var wr = ''
  function ws()
    {
    for (var i=0, len=arguments.length; i<len; i++)
      wr += arguments[i]
    }
  function wl()
    {
    ws.apply( null, arguments )
    ws( String.fromCharCode(32, 13, 10) )
    }
  function init()
    {
    wl( "var wr = ''" )
    wl( ws.toString() )
    wl( wl.toString() )
    }
  this.get_source = function()
    {
    return wr
    }
  init()
  } 
 

var Swap=0

$w_lib = new w_class()

if ( document.images )
  {
  var next_btn = new Image()
  next_btn.src = "./images/next_on.gif"
  //
  var back_btn = new Image()
  back_btn.src = "./images/back_on.gif"
  //
  var on_btn = new Image()
  on_btn.src = "./images/button_on.gif"
  //
  }

function w_open( url, ww, hh )
  {
  }//w_open

 


//******************************************
// Activity JS -- begins
//******************************************
var gi_drag = new drag_class()


var pool = new Array()
pool[0] = {idea:"item 1",cln:1,dir:"ltr"} 
pool[1] = {idea:"item 2",cln:2,dir:"ltr"} 
pool[2] = {idea:"item 3",cln:1,dir:"ltr"} 
pool[3] = {idea:"item 4",cln:2,dir:"ltr"} 
pool[4] = {idea:"item 5",cln:1,dir:"ltr"} 
pool[5] = {idea:"item 6",cln:2,dir:"ltr"} 

function spf( s, t )
  {
  var i = 0
  while (s.search(/~/) >= 0)
    s = s.replace(/~/, t[i++])
  return s
  }//spf

function hat_class()
  {
  this.inhat  = function(n){return(this.ff[n])}
  this.remove = function(n){if(this.ff[n]){this.ff[n]=false;this.count--}}
  this.fill   = function(n)
    {
    this.ff = []
    for (var i=0; i < n; i++)
      this.ff[i] = true
    this.count = n
    }
  this.get = function()
    {
    var n, k, r
    r = this.count
    if (r > 0)
      {
      n = Math.ceil(Math.random()*r)
      r = k = 0
      do
        if (this.ff[r++])
          k++
      while (k < n)
        this.ff[r-1] = false
      this.count--
      }
    return r-1
    }
  if (arguments.length > 0)
    this.fill( arguments[0] )
  }//hat_class


function build_pool()
  {
  var wr = ''
  function ws()
    {
    for (var i=0; i<arguments.length; i++)
      wr += arguments[i]
    }
  function wl()
    {
    ws.apply( null, arguments )
    ws( String.fromCharCode(10) )
    }

  var hatA = new hat_class( pool.length )
  function build_tbl(dir,idea,cln,n)
    {
    var myStyle = ''
    dir == 'rtl' ? myStyle='font-weight:bold' : myStyle
    return spf('<td width="33%" align="center"><span style="cursor:pointer;~" onmousedown="gi_drag.DragStart(this,~,~)">~</span></td>',[myStyle,cln,n,idea])
    }
  p = pool.length
  wr = ''
  wl( '<table width="100%" height="100%" border="0">' )
  for ( i=0,j=1; i<p; i++,j++ )
    {
    var a = hatA.get()
    if ( i % 3 == 0)
      wl( '  <tr>' )
    wl( build_tbl(pool[a].dir,pool[a].idea,pool[a].cln,a) )
    if ( j % 3 == 0 )
      wl( '  </tr>' )
    }
  wl( '</table> ' )
  return wr
  }
var side_in = 0
var side_out = 0
function drag_class()
  {
  var green = []
  var red = []

  function judge(a,b)
    {
    x = document.getElementById('id_cnt').value
    if( pool[x].cln == b )
      {
      side_in++
      green[green.length] = a
      }
    else
      {
      side_out++
      red[red.length] = a
      }
    document.getElementById('id_cnt').value = ''
    }
  function getFB(n)
    {
    var opinion = typeof id_opinion == 'object' ? ' For additional information, click the "perspectives" button.' : ''

    var wr = ''
    function ws()
      {
      for (var i=0; i<arguments.length; i++)
        wr += arguments[i]
      }
    function wl()
      {
      ws.apply( null, arguments )
      ws( String.fromCharCode(10) )
      }

    if( n == 0 )
      fb = "All of your choices match those of the developer.  Look at you selections one more time as a review."
    else if( n == 1 )
      fb = "Your choices generally match the developer's - please, review your choices.  According to the developer's opinion, any item highlighted in blue belongs in the other column. "
    else if( n == 2 )
      fb = "Your choices differ from those of the developer's - please, review your choices.  According to the developer's opinion, any item highlighted in blue belongs in the other column. "
    else
      fb = "None of your choices match those of the developer. "
    wr = ''
    wl( '<table width="80%" height="100%" align="center">' )
    wl( '  <tr>' )
    wl( '    <td valign="top">' )
    if(n != 0 && n != 1 && n != 2 )
      wl( '     ' + fb + 'You should reset this page and try the activity one more time.' )
    else
      wl( '      ' + fb + opinion + ' Continue on with this lesson by clicking the next button on the navigation bar.' )
    wl( '    </td>' )
    wl( '  </tr>' )
    wl( '</table>' )

    return wr
    }

  this.check = function()
    {
    x = parseInt(.7 * pool.length)
    if( side_in == pool.length )
      document.getElementById('id_tgt').innerHTML = getFB(0)
    else
      {
      document.getElementById('id_tgt').innerHTML = side_in > x ? getFB(1) : getFB(2)
      }
    }

  this.getOpinion = function()
    {
    var wr = ''
    function ws()
      {
      for (var i=0; i<arguments.length; i++)
        wr += arguments[i]
      }
    function wl()
      {
      ws.apply( null, arguments )
      ws( String.fromCharCode(10) )
      }

    wr = ''
    wl( '<div style="height:3.5cm;overflow:auto;">' )
    wl( '<table width="80%" height="100%" align="center">' )
    wl( '  <tr>' )
    wl( '    <td valign="top">' )
    wl(        document.getElementById('id_fb1').innerHTML )
    wl( '    </td>' )
    wl( '  </tr>' )
    wl( '</table>' )
    wl( '</div>' )

    document.getElementById('id_tgt').innerHTML = wr
    }
  var cnt = 0
  function tries()
    {
    cnt++
    return cnt
    }
  this.highlight = function()
    {
    var words= document.getElementsByName('outWord')
    for( i=0; i<words.length; i++ )
      {
      for( j=0; j<red.length; j++ )
        {
        words[i].disabled = false
        if( words[i].value == red[j].value )
          {
          words[i].style.color = '#0000ff'
          words[i].style.fontWeight = 'bold'
          }
        }
      }
    }
  this.DragStart = function(a,b,c)
    {
    a.className = 'dragged'
    document.getElementById('id_barrel').value = a.innerHTML
    document.getElementById('id_cnt').value = c
    a.onclick = function(){}
    }

  this.DragStop = function(a,b)
    {
    if( a.value.length <= 0 && document.getElementById('id_barrel').value.length > 0)
      {
      a.value=document.getElementById('id_barrel').value
      a.disabled = true
      document.getElementById('id_barrel').value = ''
      judge(a,b)
      if( tries() >= pool.length )
        document.getElementById('id_btn').style.display = 'none'
      }
    }
  }

window.onload = function()
  {
  var r=document.body.innerHTML
  r = r.replace( /_IDEA_POOL_/, build_pool() )
  document.body.innerHTML = r
  }


//******************************************
// Activity JS -- end
//******************************************

//=========================================================================
</script>
</head>

<body>
<div style="width:500px" >
<table border="1" width="100%" height="70px" align="center">
  <tr>
    <td id="id_tgt" class="txt_bg2" valign="top">
        _IDEA_POOL_
    </td>
  </td>
</table>

<table border="0" width="95%" align="center">
  <tr>
    <td width="40%" align="center" class="over_title" dir="ltr">
      Category I
    </td>
    <td width="20%">&nbsp;</td>
    <td width="40%" align="center" class="over_title" dir="ltr">
      Category II
    </td>
  </tr>
  <tr>
    <td width="40%">
    <table border="3" width="100%"  class="css_act" style="border-collapse: collapse;">
      <tr>
        <td width="100%" align="center">
        <input type="text" name="outWord" style="width:98%;text-align:center;" rows="1" onclick="gi_drag.DragStop(this,1);" size="20" /></td>
      </tr>
 
      <tr>
        <td width="100%" align="center">
        <input type="text" name="outWord" style="width:98%;text-align:center;" rows="1" onclick="gi_drag.DragStop(this,1);" size="20" /></td>
      </tr>
 
      <tr>
        <td width="100%" align="center">
        <input type="text" name="outWord" style="width:98%;text-align:center;" rows="1" onclick="gi_drag.DragStop(this,1);" size="20" /></td>
      </tr>
 
      <tr>
        <td width="100%" align="center">
        <input type="text" name="outWord" style="width:98%;text-align:center;" rows="1" onclick="gi_drag.DragStop(this,1);" size="20" /></td>
      </tr>
 

    </table>
    </td>
    <td width="20%" align="center">
      <div id="id_btn" style="display:none;">
        <button class="btn" style="width:110px;" onclick="gi_drag.check();gi_drag.highlight();">Check</button>
        <br />
        <button id="id_opinion" class="btn" style="width:110px;" onclick="gi_drag.getOpinion()">Perspectives</button>
      </div>
    </td>
    <td width="40%">
    <table border="3" width="100%" class="css_act" style="border-collapse:collapse">
      <tr>
        <td width="100%" align="center">
        <input type="text" name="outWord" style="width:98%;text-align:center;" rows="1" onclick="gi_drag.DragStop(this,2);" size="20" /></td>
      </tr>
 
      <tr>
        <td width="100%" align="center">
        <input type="text" name="outWord" style="width:98%;text-align:center;" rows="1" onclick="gi_drag.DragStop(this,2);" size="20" /></td>
      </tr>
 
      <tr>
        <td width="100%" align="center">
        <input type="text" name="outWord" style="width:98%;text-align:center;" rows="1" onclick="gi_drag.DragStop(this,2);" size="20" /></td>
      </tr>
 
      <tr>
        <td width="100%" align="center">
        <input type="text" name="outWord" style="width:98%;text-align:center;" rows="1" onclick="gi_drag.DragStop(this,2);" size="20" /></td>
      </tr>
 
    </table>
    </td>
  </tr>
</table>
<p align="center"><button class="btn" onclick="window.location.reload()">Reset</button></p>
</div>
<input type="hidden" id="id_barrel">
<input type="hidden" id="id_cnt">
<div id="id_fb1" style="display:none;height:190px" >
</div> 



</body>

</html>