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

echo "<div class=\"flex-container\">"; // flex row_n2_".$uniq_div_from_activity_title."_ 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 $xml4tpath0.$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: #d6e51f; /*#e7f25b; */
/*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>";
  }

// disabled due to bug in xml_multi_dd_ column and/or row_n2_".$uniq_div_from_activity_title."_ 
// affecting each other's scores...
//echo "<div class=\"flex-container\"><div><img src=\"".$xml4tpath0."pix/icons8-quiz-100.png\" width=\"70em\" border=\"0\" alt=\"test name\"></div><div>Score <div id=\"score_row_n2_".$uniq_div_from_activity_title."_\" style=\"color: green;\"></div></div><div> Mistakes <div id=\"mistakes_row_n2_".$uniq_div_from_activity_title."_\" style=\"color: red;\"></div></div><br /> <div id=\"feedback_row_n2_".$uniq_div_from_activity_title."_\"></div></div>\n";
echo "<div id=\"score_row_n2_".$uniq_div_from_activity_title."_\" style=\"color: green; display: none;\"></div> <div id=\"mistakes_row_n2_".$uniq_div_from_activity_title."_\" style=\"color: red; display: none;\"\"></div><div id=\"feedback_row_n2_".$uniq_div_from_activity_title."_\" style=\"display: none;\"></div>\n";

    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>";
if (!empty($activity->activity_lead_in)) {
echo "<span class=\"sbook_activity_lead_in\">".$activity->activity_lead_in."</span>\n";
}
if (!empty($activity->instructions)) {
echo "<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_n2_".$uniq_div_from_activity_title."_ 1

echo "<div class=\"flex-container\">"; // flex row_n2_".$uniq_div_from_activity_title."_ 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=\"".$xml4tpath0."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
$targets = $lines = ${"lines_row_n2"."_"."uniq_div_from_activity_title"."_"} = ${"result_row_n2"."_"."uniq_div_from_activity_title"."_"} = ${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"} = $obj = "";
//$targets = $lines = $lines_row_n2_".$uniq_div_from_activity_title."_ = $result_row_n2_".$uniq_div_from_activity_title."_ = ${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"} = $obj = "";

echo "<div id=\"container_row_n2_".$uniq_div_from_activity_title."_\">";
$targets = trim($clog_activity->targets);
$targets = array($targets);

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

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

<?php
//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_object_row_n2_".$uniq_div_from_activity_title."_s_to_drag\">\n";
foreach ($sentences as $sentence) {
$i++;
$sentence_wo_spaces = trim(preg_replace("/[^\da-z]/i",'_',$sentence));
echo $sentence;
//echo "<div id=\"object_row_n2_".$uniq_div_from_activity_title."_1\">".$sentence."</div>\n";
}
*/

$activity_contents = trim($clog_activity->activity_contents);
$activity_contents = array($activity_contents);
echo "<div id=\"multi_dd_object_row_n2_".$uniq_div_from_activity_title."_s_to_drag\">\n";

// add a unique id for each sentence
foreach ($activity_contents as $activity_content) {
${"lines_row_n2"."_"."uniq_div_from_activity_title"."_"} = explode("\n", $activity_content);
${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"} = count(${"lines_row_n2"."_"."uniq_div_from_activity_title"."_"});
$i = 1; // autoincrement to create unique identifier 
foreach (${"lines_row_n2"."_"."uniq_div_from_activity_title"."_"} as $line) {
$line = "<div id=\"object_row_n2_".$uniq_div_from_activity_title."_".$i."\">".$line."</div>\n";
${"result_row_n2"."_"."uniq_div_from_activity_title"."_"} .= $line;
$i++;
}
// shuffle all sentences
${"all_object_row_n2"."_"."uniq_div_from_activity_title"."_s"} = explode ("\n", ${"result_row_n2"."_"."uniq_div_from_activity_title"."_"});
shuffle (${"all_object_row_n2"."_"."uniq_div_from_activity_title"."_s"});
foreach (${"all_object_row_n2"."_"."uniq_div_from_activity_title"."_s"} as ${"object_row_n2"."_"."uniq_div_from_activity_title"."_"}) {
echo ${"object_row_n2"."_"."uniq_div_from_activity_title"."_"};
}
}
unset(${"lines_row_n2"."_"."uniq_div_from_activity_title"."_"});
unset(${"result_row_n2"."_"."uniq_div_from_activity_title"."_"});
echo "<div style=\"clear: both; display: block;\"></div>\n";
echo "</div><!-- end of multi_dd_object_row_n2_".$uniq_div_from_activity_title."_s_to_drag--> \n";
echo "</div><!-- end container_row_n2_".$uniq_div_from_activity_title."_ -->\n";

echo "<style>";
// dynamically generate #object_row_n2_".$uniq_div_from_activity_title."_s for style
for ($n=1; $n<=${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"}; $n++) {
$obj = "#object_row_n2_".$uniq_div_from_activity_title."_".$n;
if ($n != ${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"}) {
    $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 (object_row_n2_".$uniq_div_from_activity_title."_s)
$xml_multi_dd_column_width_n2 = trim($clog_activity->column_width_percentage);
$xml_multi_dd_column_height_n2 = trim($clog_activity->column_height_em);
$xml_multi_dd_column_float_n2 = trim($clog_activity->column_float);
?>
<style>

.multi_dd_target_row_n2_<?php echo $uniq_div_from_activity_title;?>_
{
position: relative;
width: <?php echo $xml_multi_dd_column_width_n2;?>%; /*220px; /*25%;  */
min-height: <?php echo $xml_multi_dd_column_height_n2;?>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: <?php echo $xml_multi_dd_column_float_n2;?>;
/* margin: 0px auto 0px 2em; */
margin-left: 1em;
padding: 0.3em;
}

#multi_dd_object_row_n2_<?php echo $uniq_div_from_activity_title;?>_s_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 #object_row_n2_".$uniq_div_from_activity_title."_s for script
for ($n=1; $n<=${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"}; $n++) {
echo "var object_row_n2_".$uniq_div_from_activity_title."_".$n." = document.getElementById('object_row_n2_".$uniq_div_from_activity_title."_".$n."'); \n";
}

echo "var objArray_row_n2_".$uniq_div_from_activity_title."_ = [";
for ($n=1; $n<=${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"}; $n++) {
$obj_for_array ="'#object_row_n2_".$uniq_div_from_activity_title."_".$n."'";
if ($n != ${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"}) {
$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_row_n2_<?php echo $uniq_div_from_activity_title;?>_ = 0;

var score_row_n2_<?php echo $uniq_div_from_activity_title;?>_ = 0; // set to record (all?) answers
var mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_ = 0; // set to record mistakes_row_n2_".$uniq_div_from_activity_title."_


//jQ
var j = jQuery.noConflict();
j(document).ready(function()
{
// multi_dd_object_row_n2_".$uniq_div_from_activity_title."_s_to_drag
<?php
echo "j('";
for ($n=1; $n<=${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"}; $n++) {
$obj_draggable ="#object_row_n2_".$uniq_div_from_activity_title."_".$n;
if ($n != ${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"}) {
$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_row_n2_<?php echo $uniq_div_from_activity_title;?>_',
	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_row_n2_<?php echo $uniq_div_from_activity_title;?>_').html('<h3>Try again!</h3>');

score_row_n2_<?php echo $uniq_div_from_activity_title;?>_--;
console.log(score_row_n2_<?php echo $uniq_div_from_activity_title;?>_);
mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_++;
console.log(mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_);

document.getElementById("score_row_n2_<?php echo $uniq_div_from_activity_title;?>_").innerHTML = score_row_n2_<?php echo $uniq_div_from_activity_title?>_;
document.getElementById("mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_").innerHTML = mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_;

			return true;

			}
		},	
	stack: 'div',//bring it to the top by adjusting z-index of the element
        // used to avoid object_row_n2_".$uniq_div_from_activity_title."_s 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
// dynamically generate droppables for script
$js_droppables = trim($clog_activity->js_droppables);
$js_droppables = array($js_droppables);

foreach ($js_droppables as $js_droppable) {
${"lines_row_n2"."_"."uniq_div_from_activity_title"."_"} = explode("\n", $js_droppable);
$count_targets = count(${"lines_row_n2"."_"."uniq_div_from_activity_title"."_"}); // 1 target per line
$i = 1; // autoincrement for each target

foreach (${"lines_row_n2"."_"."uniq_div_from_activity_title"."_"} as $line) {
echo "j('#multi_dd_target_row_n2_".$uniq_div_from_activity_title."__".$i."').droppable\n";
echo "    ({\n";
echo "	drop: right,\n";
echo "	accept: '";

${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_s"} = explode(";",$line);
$last_value = end(${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_s"});

foreach (${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_s"} as ${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_"}) {
$check_last_value = ${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_"};
${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_"} = "#object_row_n2_".$uniq_div_from_activity_title."_".${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_"};
if ($check_last_value !== $last_value) {
    ${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_"} = ${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_"}.", ";  
    }
else {
    ${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_"} = ${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_"};
}
echo ${"accept_object_row_n2"."_"."uniq_div_from_activity_title"."_"};
} // foreach ($accept_object_row_n2_".$uniq_div_from_activity_title."_s as $accept_object_row_n2_".$uniq_div_from_activity_title."_)

echo "'\n";
echo "	});\n";
$i++;
} // foreach ($lines_row_n2_".$uniq_div_from_activity_title."_ as $line)
} // foreach ($js_droppables as $js_droppable)
unset($i);
?>
});//end on doc load

//EXTERNAL METHODS
//clear the feedback_row_n2_".$uniq_div_from_activity_title."_ div onDrag
function clearer(event, ui)
{ j('#feedback_row_n2_<?php echo $uniq_div_from_activity_title;?>_').html(''); }

//if the dropTarget is correct
function right(event, ui)
        {
j('#feedback_row_n2_<?php echo $uniq_div_from_activity_title;?>_').html('<h3>Correct <?php echo ${"r_row_n2"."_"."uniq_div_from_activity_title"."_"}; ?></h3>');

score_row_n2_<?php echo $uniq_div_from_activity_title;?>_++;
console.log(score_row_n2_<?php echo $uniq_div_from_activity_title;?>_);

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_row_n2_<?php echo $uniq_div_from_activity_title;?>_++;
<!-- need to match resetter_row_n2_<?php echo $uniq_div_from_activity_title;?>_ to total # of object_row_n2_<?php echo $uniq_div_from_activity_title;?>_s -->
if (resetter_row_n2_<?php echo $uniq_div_from_activity_title;?>_ == <?php echo ${"resetter_row_n2"."_"."uniq_div_from_activity_title"."_"};?>)
	{
	//console.log(resetter_row_n2_".$uniq_div_from_activity_title."_);
	j('#feedback_row_n2_<?php echo $uniq_div_from_activity_title;?>_').html('<h3 class="greentext">Task completed (<?php echo ${"r_row_n2"."_"."uniq_div_from_activity_title"."_"}; ?> )</h3>');

	j('#logo').html('<button type="button" onclick="resetIt()">Reset</button>');
	}
else
	{
	//do nothing
	}
//document.getElementById("score_row_n2_".$uniq_div_from_activity_title."_").outerHTML = score_row_n2_".$uniq_div_from_activity_title."_;
//document.getElementById("mistakes_row_n2_".$uniq_div_from_activity_title."_").outerHTML = mistakes_row_n2_".$uniq_div_from_activity_title."_;
document.getElementById("score_row_n2_<?php echo $uniq_div_from_activity_title;?>_").innerHTML = score_row_n2_<?php echo $uniq_div_from_activity_title;?>_;
document.getElementById("mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_").innerHTML = mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_;

}

//on reset button click
function resetIt() {
resetter_row_n2_<?php echo $uniq_div_from_activity_title;?>_ = 0;
j('#feedback_row_n2_<?php echo $uniq_div_from_activity_title;?>_').html('');
j('#logo').html('<!-- todo - mysql insert into table -->');
//console.log(objArray_row_n2_".$uniq_div_from_activity_title."_);
for (x = 0; x < objArray_row_n2_<?php echo $uniq_div_from_activity_title;?>_.length; x++)
	{
	j(objArray_row_n2_<?php echo $uniq_div_from_activity_title;?>_[x]).css('left', '0');
	j(objArray_row_n2_<?php echo $uniq_div_from_activity_title;?>_[x]).css('top', '0');
	//j(objArray_row_n2_".$uniq_div_from_activity_title."_[x]).css('float', 'left');
	j(objArray_row_n2_<?php echo $uniq_div_from_activity_title;?>_[x]).css('background-color', '#09C');
	j(objArray_row_n2_<?php echo $uniq_div_from_activity_title;?>_[x]).css('color','#fff');
	j(objArray_row_n2_<?php echo $uniq_div_from_activity_title;?>_[x]).draggable('enable');//re-enable the draggable state
	j(objArray_row_n2_<?php echo $uniq_div_from_activity_title;?>_[x]).draggable({revert: function(valid) //gotta recall the revert function
		{
		if(!valid)
			{
			//this.remove();

			j('#feedback_row_n2_<?php echo $uniq_div_from_activity_title;?>_').html('<h3>Wrong, try again (<?php echo ${"r_row_n2"."_"."uniq_div_from_activity_title"."_"};?></h3>');
			return true;

//score_row_n2_".$uniq_div_from_activity_title."_--;
console.log(score_row_n2_<?php echo $uniq_div_from_activity_title;?>_);
mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_++;
console.log(mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_);
			}
		}
		});
	}
document.getElementById("score_row_n2_<?php echo $uniq_div_from_activity_title;?>_").innerHTML = score_row_n2_<?php echo $uniq_div_from_activity_title;?>_;
document.getElementById("mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_").innerHTML = mistakes_row_n2_<?php echo $uniq_div_from_activity_title;?>_;
}
</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_row_n2_".$uniq_div_from_activity_title."_ -->\n"; // flex-container_row_n2_".$uniq_div_from_activity_title."_ 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_row_n2_".$uniq_div_from_activity_title."_ -->\n"; // flex-container_row_n2_".$uniq_div_from_activity_title."_ 2

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

//echo "<br /><br /><img src=\"".$xml4tpath0."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=\"".$xml4tpath0."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=\"".$xml4tpath0."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
?>
