<?php 
echo "<div id=\"not_to_print_deck\">";

echo "<div class=\"flex-container\">"; // flex row 1
    echo "<div class=\"sbook_left_column\">\n";
  if (!empty(trim($activity->activity_icon)))  {
        echo "<div class=\"sbook_activity_icon".$uniq_div_from_activity_title."\"> <a id=\"".$activity->hw_anchor."\" name=\"".$activity->hw_anchor."\"> &nbsp; ".$activity->activity_title."</a></div>";
        //echo "<div class=\"sbook_activity_icon".$uniq_div_from_activity_title."\"> <a id=\"".$activity->hw_anchor."\" name=\"".$activity->hw_anchor."\"> &nbsp; ".$exercise_name." - ".$selection_number."</a></div>";
?>

<style>
div.sbook_activity_icon<?php echo $uniq_div_from_activity_title ?>::before {
content: "";
background : url(<?php echo $activity->activity_icon ?>) top no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin-right: 1%;
padding: 1em;
/*transform: scale(0.2); */
display: inline-block; /*mandatory*/
/*border: solid 1px;  */
}
div.sbook_activity_icon<?php echo $uniq_div_from_activity_title ?> {
max-width : 80%;
line-height: 2em;
margin-left: 1%;
padding-top: 1.2em;
padding-left: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
text-overflow: ellipsis;
word-wrap: break-word; 
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align :center;
font-size : 120%;
font-weight : bold;
font-family : sans-serif;
color: white;
background-color: #ababad;
}
</style>

<?php
        /*
@media print {
div.sbook_activity_icon<?php echo $uniq_div_from_activity_title ?> {
max-width : 72%; 80
line-height: 1.5em; 2
font-size : 105%; 120
}
         */
  }
  //else {     echo "<div class=\"sbook_construction\"> <a id=\"".$activity->hw_anchor."\" name=\"".$activity->hw_anchor."\"> &nbsp; ".$exercise_type."</a></div>";
  else {     echo "<div class=\"sbook_freer_practice\"> <a id=\"".$activity->hw_anchor."\" name=\"".$activity->hw_anchor."\"> &nbsp; ".$activity->activity_title."</a></div>";
  }

    echo "</div><!-- end sbook_left_column -->\n";

    echo "<div class=\"sbook_middle_right_column\">\n";
    echo "<pre class=\"sbook_lesson_plan\">";
        //echo "<span class=\"sbook_exercise_no\">".$activity->activity_id."</span> <span class=\"sbook_instructions\">".$activity->instructions."</span>";
        echo "<span class=\"sbook_exercise_no\">".$activity->activity_id."</span> <span class=\"sbook_instructions\">".$activity->instructions."</span>";
  $instructions_demo = trim($activity->instructions_demo);
  if (!empty($activity->instructions_demo))  {
    echo "\n<div class=\"sbook_instructions_demo\">".$activity->instructions_demo."</div>";
  }
//echo "<br />\n";
//    echo "</pre>";
    //echo "</div>\n"; // class=\"sbook_middle_right_column\"
    echo "</div>"; // class=\"sbook_middle_right_column\"
echo "</div> <!-- flex-container -->"; // flex row 1

echo "<div class=\"flex-container\">"; // flex row 2 
/*
echo "<div class=\"sbook_left_column\">";


echo "</div> <!-- end sbook_left_column -->\n";


echo "<div class=\"sbook_middle_right_column\">\n";
*/
    if (!empty($activity->instructions02))  {
    include ('js/swap_divs_w_click.js');
echo "<div id=\"swapper-first_".$uniq_div_from_activity_title."\" style=\"display:block;\">";
echo "<a href=\"javascript:SwapDivsWithClick('swapper-first_".$uniq_div_from_activity_title."','swapper-other_".$uniq_div_from_activity_title."')\"><img src=\"pix/icons8-hand-with-pen-100.png\" width=\"35em\" border=\"0\" alt=\"Take notes\" />  Take notes</a>\n";
    //echo "<div contenteditable=\"true\" style=\"width: 120%\">\n";
    echo "<div contenteditable=\"true\">\n";
    echo "<span class=\"sbook_instructions02\" style=\"font-size: 160%; font-weight: bold;\">".$activity->instructions02."</span>";
    echo "</div> <!-- contenteditable -->\n";
echo "</div><!-- end swapper first -->\n";

// DISPLAY (hidden by default)
echo "<div id=\"swapper-other_".$uniq_div_from_activity_title."\" style=\"display:none; float: left; position: fixed; bottom: 55%; margin-left: 58%; z-index: 1000; width: 30%;\">\n"; // 20220322-1149
//echo "<div id=\"swapper-other_".$uniq_div_from_activity_title."\" style=\"display:none; float: left; position: fixed; bottom: 55%; margin-left: 2%; z-index: 1000; width: 18%;\">\n"; // 20210409-0026
    $prep_notes = $activity->instructions02; // 20220218-1735
    $prep_notes = strip_tags($prep_notes);
    include ('sbook_plugins/take_notes_floating01.inc');

echo "</div><!-- end swap other -->\n";

//$fileNameToSaveAs = `date +%Y%m%d`."_{$sbook}_ref_notes_{$member}.txt";
//$activity_title = trim(preg_replace("/[^\da-z]/i", '_',$activity->activity_title)). trim(preg_replace("/[^\da-z]/i", '_',$activity->instructions)); // only for course log version - improve for better legibility
$activity_title = trim(preg_replace("/[^\da-z]/i", '_',$activity->activity_title));
$fileNameToSaveAs = $sbook_ref."_".$activity_title."_notes_".$member."_".date('Ymd_His').".txt";
include ('js/save_text_as_file.js');

echo "<style>\n";
echo "#empty_div2mov_cards".$uniq_div_from_activity_title." {\n";
echo "position: relative;\n";
echo "width: 100%;";
echo "max-height: 20%;"; 
echo "padding: 0.1em;\n";
echo "}\n";

echo "#div2mov_cards".$uniq_div_from_activity_title." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "top: -14em;";
echo "left: -80%; /*-16em; */";
echo "width: 170%;";
echo "display: inline-block;\n";
echo "box-shadow: 0px 0px 4px 2px #052a3a;\n";
echo "resize: both;";
echo "height: 35em; /*30em;*/"; 
echo "overflow-y: scroll;"; 
echo "}\n";

// Can't hide scrollbars in Firefox...
// Hide scrollbar for Chrome, Safari and Opera 
echo "#div2mov_cards".$uniq_div_from_activity_title."::-webkit-scrollbar {";
echo "display: none;";
echo "}\n";
// Hide scrollbar for IE and Edge
echo "#div2mov_cards".$uniq_div_from_activity_title." {";
echo "ms-overflow-style: none;";
echo "}\n";

echo "</style>\n";

echo "<script>\n";
echo"dragElement(document.getElementById(('div2mov_cards".$uniq_div_from_activity_title."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";
  }
?>

<!-- https://codepen.io/griffininsight/pen/HDFBa
https://codepen.io/griffininsight/details/DyqeKb -->
<script src="js/jquery.min.js"></script><!-- MUST list before jquery-ui -->
<script src="js/jquery-ui.min.js"></script>
<script src="js/tpunch.js"></script>

<?php

echo "<div id=\"container\">";
$targets = trim($clog_activity->targets);
$targets = array($targets);

// add a unique id for each sentence
foreach ($targets as $target) {
$lines = explode("\n", $target);
$i = 1; // autoincrement to create unique identifier 
foreach ($lines as $line) {
$line = "<div id=\"multi_dd_target_".$i."\" class=\"multi_dd_target\" contenteditable=\"true\"><h4>".$line."</h4></div>";
$result .= $line;
$i++;
}
}
echo $result."\n";
unset($lines);
unset($result);

echo "<div style=\"clear: both; display: block;\"></div>\n";

echo "<div id=\"feedback\"></div>\n";
//echo "<div style=\"clear: both; display: block;\"></div>\n";

/* orig
$sentences = explode ("\n", $file);
shuffle ($sentences);
$i = 1; // autoincrement to create unique identifier 

echo "<div id=\"multi_dd_objects_to_drag\">\n";
foreach ($sentences as $sentence) {
$i++;
$sentence_wo_spaces = trim(preg_replace("/[^\da-z]/i",'_',$sentence));
echo $sentence;
//echo "<div id=\"object1\">".$sentence."</div>\n";
}
*/

// hard-coded below in style and js - max 20 objects!
$activity_contents = trim($clog_activity->activity_contents);
$activity_contents = array($activity_contents);
echo "<div id=\"multi_dd_objects_to_drag\">\n";
/*
// old but keep just in case should implement 2 columns in csv file
foreach ($activity_contents as $activity_content) {
$lines = explode("\n", $activity_content);
shuffle ($lines);

foreach ($lines as $line) {
list($object,$sentence) = explode(";", $line);
echo "<div id=\"object".$object."\">".$sentence."</div>\n";
*/

// add a unique id for each sentence
foreach ($activity_contents as $activity_content) {
$lines = explode("\n", $activity_content);
$resetter = count($lines);
$i = 1; // autoincrement to create unique identifier 
foreach ($lines as $line) {
$line = "<div id=\"object".$i."\">".$line."</div>\n";
$result .= $line;
$i++;
}
// shuffle all sentences
$all_objects = explode ("\n", $result);
shuffle ($all_objects);
foreach ($all_objects as $object) {
echo $object;
}
}
unset($lines);
unset($result);
echo "<div style=\"clear: both; display: block;\"></div>\n";
echo "</div><!-- end of multi_dd_objects_to_drag--> \n";
echo "</div><!-- end container -->\n";

echo "<style>";
// dynamically generate #objects for style
for ($n=1; $n<=$resetter; $n++) {
$obj = "#object".$n;
if ($n != $resetter) {
    $obj = $obj.", ";  
    }
else {
    $obj = $obj;  
}
echo $obj;
}
echo "\n";
unset ($obj);
echo "{\n";
echo "z-index: 9;\n";
//echo "position: absolute;\n"; /* check if still needed */
//echo "margin-right: -8%;\n";
//echo "contenteditable: true;\n"; // fails???
echo "float: left;\n";
//echo "padding: 0.1em;\n";
echo "text-align: center;\n";
echo "cursor: pointer;\n";
echo "color: black;\n";
echo "font-size: 100%;\n";
//echo "padding: 0.2em;\n";
echo "margin-left: 0.4em;\n";
echo "max-width: 15%;\n";
echo "margin-top: 0.2em;\n";
echo "padding-left: 0.4em;\n";
echo "padding-right: 0.4em;\n";
echo "-moz-border-radius: 4px;\n";
echo "-webkit-border-radius: 4px;\n";
echo "border-radius: 4px;\n";
echo "background-color: DarkSeaGreen;\n";
echo "opacity: 0.9;\n";
echo "filter: alpha(opacity=90);\n"; // For IE8 and earlier
echo "box-shadow: 0px 4px 4px 2px rgba(0,0,0,0.2);\n";
echo "/* Prevent text from being selectable */\n";
echo "-webkit-touch-callout: none;\n";
echo "-khtml-user-select: none;\n";
echo "-moz-user-select: none;\n";
echo "-ms-user-select: none;\n";
echo "-o-user-select: none;\n";
echo "user-select: none;\n";
echo "}\n";
echo "</style>";

// set size of area for targets manually in xml
// depends on number &amp; length of sentences (objects)
$xml_multi_dd_column_width = trim($clog_activity->column_width_percentage);
$xml_multi_dd_column_height = trim($clog_activity->column_height_em);
?>
<style>

.multi_dd_target
{
position: relative;
width: <?php echo $xml_multi_dd_column_width;?>%; /*220px; /*25%;  */
min-height: <?php echo $xml_multi_dd_column_height;?>em; /*250px;*/
/*border: 2px solid #efeccd; */
box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
text-align: center !important;
vertical-align: top;
float: left;
/* margin: 0px auto 0px 2em; */
margin-top: -2em;
margin-left: 2em;
padding: 0.7em;
}

#multi_dd_objects_to_drag
{
padding: 0px auto 0px auto;
text-align: center;
/* border: 0px dashed #ff0000; */
width: 100%; /*685px; */
/*height:150px;
margin-top:10px;
margin-left:5px; */
}
</style>

<script>
<?php
// dynamically generate #objects for script
for ($n=1; $n<=$resetter; $n++) {
echo "var object".$n." = document.getElementById('object".$n."'); \n";
}

echo "var objArray = [";
for ($n=1; $n<=$resetter; $n++) {
$obj_for_array ="'#object".$n."'";
if ($n != $resetter) {
$obj_for_array = $obj_for_array.", ";
}
else {
    $obj_for_array = $obj_for_array;  
}
echo $obj_for_array;
}
echo "];\n";
?>

//var targArray = ['#target1', '#target2', '#target3', '#target4', '#target5'];
var startDrag = '';
var resetter = 0;

//jQ
var j = jQuery.noConflict();
j(document).ready(function()
{
// multi_dd_objects_to_drag
<?php
echo "j('";
for ($n=1; $n<=$resetter; $n++) {
$obj_draggable ="#object".$n;
if ($n != $resetter) {
$obj_draggable = $obj_draggable.", ";
}
else {
    $obj_draggable = $obj_draggable;  
}
echo $obj_draggable;
}
echo "').draggable\n";
?>
({
start: function(event,ui) {
startDrag = ui.position;
//console.log(startDrag);
},
	containment: '#container',
	cursor: 'move',
	//snap: '#target1',
	//snapMode: 'inner',
	//snapTolerance: 35,
	//revert: wrong,//call the wrong function on revert
	//revert: true,
	revert: function(valid)
		{
		if(!valid)
			{
			//this.remove();
			j('#feedback').html('<h3>Try again!</h3>');
			return true;
			}
		},	
	stack: 'div',//bring it to the top by adjusting z-index of the element
        // used to avoid objects moving after each selection???
        // check if need to include back into css - skip for now...
	drag: clearer,
	stop: function(event,ui)
		{
		//console.log("finished");
		}
	});
	
//droppables	
<?php
$js_droppables = trim($clog_activity->js_droppables);
$js_droppables = array($js_droppables);

foreach ($js_droppables as $js_droppable) {
$lines = explode("\n", $js_droppable);
/*
foreach ($lines as $line) {
list($multi_dd_target,$objects) = explode(";", $line);
//list($multi_dd_targets,$objects) = explode(";", $js_droppable);
echo "j('#multi_dd_target_".$multi_dd_target."').droppable\n";
echo "    ({\n";
echo "	drop: right,\n";
echo "	accept: '".$objects."'\n";
//echo "//tolerance: intersect\n";
echo "	});\n";
} // foreach ($lines as $line)
*/

foreach ($lines as $line) {
list($multi_dd_targets,$objects) = explode(";", $line);
//echo "multi_dd_targets   ".$multi_dd_targets;
//echo "objects    ".$objects;

//$multi_dd_targets = array($multi_dd_targets);
//var_dump($multi_dd_targets); 

//$objects = array($objects);
//var_dump($objects); 


//foreach ($multi_dd_targets as $multi_dd_target) {
//echo "multi_dd_target    ".$multi_dd_target."\n";

echo "j('#multi_dd_target_".$multi_dd_targets."').droppable\n";
echo "    ({\n";
echo "	drop: right,\n";
echo "	accept: '";

$accept_objects = explode(" ",$objects);
//var_dump($accept_objects);
$count = count($accept_objects); 
//echo "<!-- count: ". $count." -->\n";

foreach ($accept_objects as $accept_object) {
//echo "<!-- accept_objects: ". $accept_object." -->\n";
$accept_object = "#object".$accept_object;
for ($n=1; $n<=$count; $n++) {
if ($n != $count) {
echo $accept_object." , "; 
}
else {
echo $accept_object;
}
}
} // foreach ($accept_objects as $accept_object)


echo "'\n";
echo "	});\n";

//} // foreach ($multi_dd_targets as $multi_dd_target)
} // foreach ($lines as $line)
} // foreach ($js_droppables as $js_droppable)
?>

});//end on doc load

//EXTERNAL METHODS
<?php
$r = 0; // autoincrement result to calculate score 
?>
//clear the feedback div onDrag
function clearer(event, ui)
{ j('#feedback').html(''); }

//if the dropTarget is correct
function right(event, ui)
{
<?php $r++; ?>
j('#feedback').html('<h3>Correct - <?php echo $r; ?></h3>');
var draggable = ui.draggable;
draggable.draggable('disable');
draggable.draggable('option', 'revert', false);//turn revert off
//draggable.offset(j(this).offset());//lock it on top of the targets x and y
draggable.css('background-color','#ffffff');
draggable.css('color','#09C');
resetter++;
<!-- need to match resetter to total # of objects -->
if (resetter == <?php echo $resetter;?>)
	{
	//console.log(resetter);
	j('#feedback').html('<h3 class="greentext">Task completed (<?php echo $r; ?> )</h3>');
	j('#logo').html('<button type="button" onclick="resetIt()">Reset</button>');
	}
else
	{
	//do nothing
	}
}

//on reset button click
function resetIt() {
resetter = 0;
j('#feedback').html('');
j('#logo').html('<!-- todo - mysql insert into table -->');
//console.log(objArray);
for (x = 0; x < objArray.length; x++)
	{
	j(objArray[x]).css('left', '0');
	j(objArray[x]).css('top', '0');
	//j(objArray[x]).css('float', 'left');
	j(objArray[x]).css('background-color', '#09C');
	j(objArray[x]).css('color','#fff');
	j(objArray[x]).draggable('enable');//re-enable the draggable state
	j(objArray[x]).draggable({revert: function(valid) //gotta recall the revert function
		{
		if(!valid)
			{
			//this.remove();
                        <?php $r--; ?>
			j('#feedback').html('<h3>Wrong, try again (<?php echo $r; ?></h3>');
			return true;
			}
		}
		});
	}
}
</script>
<!--
Copyright (c) 2023 by Curtis Griffin (https://codepen.io/griffininsight/pen/DyqeKb)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

<?php
//echo "</pre>";
    echo "<div style=\"clear: both;\"></div>\n";
echo "</div> <!-- end flex-container -->\n"; // flex-container 2

echo "<div class=\"sbook_left_column\">";
echo "</div> <!-- end sbook_left_column -->\n";
echo "<div class=\"sbook_middle_right_column\">\n";
echo "</div> <!-- end sbook_middle_column -->\n";

//echo "</div> <!-- end flex-container -->\n"; // flex-container 2

//echo "</div>"; // "<div style=\"background: url(".$background_image.") no-repeat right; background-size: contain;\">\n";

//echo "<br /><br /><img src=\"pix/icons8-key-50.png\" width=\"35em\" border=\"0\" alt=\"key to exercise\">  Hover to view key:\n";
//echo "<span class=\"show_key\">";
//echo "<img valign=\"bottom\" src=\"".$key_image."\" width=\"80%\" border=\"0\" alt=\"key\">";
//echo "</span>\n";

    echo "<div style=\"clear: both;\"></div>\n";

//echo "<br /><img src=\"pix/icons8-key-50.png\" width=\"35em\" border=\"0\" alt=\"key to exercise\"> Original text:";
//echo "<div contenteditable=\"true\"><span class=\"show_key_sbook\">".$key."<br />"; // 20220218-1843 commented out but need to create new uncommented
echo "<img src=\"pix/icons8-key-50.png\" width=\"35em\" border=\"0\" alt=\"key to exercise\">";
echo "<div contenteditable=\"true\"><span class=\"show_key_sbook\">";

  if (!empty($activity->key))  {
echo "Suggested answer:<br />";
echo $activity->key;
  }
echo "</span></div>";

//echo "</pre>"; // pre class= sbook_lesson_plan
//echo "</div>"; // not to print
?>
