<?php
echo "<div class=\"flex-container\">";
    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>";
?>

<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; /*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_vocab\"> <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>";
  $instructions_demo = trim($activity->instructions_demo);
  if (!empty($activity->instructions_demo))  {
    echo "\n<div class=\"sbook_instructions_demo\">".$activity->instructions_demo."</div>";
  }
  if (!empty($activity->instructions02))  {
    echo "\n<span class=\"sbook_instructions02\">".$activity->instructions02."</span>";
  }
//echo "<br />\n";
    echo "</div>\n"; // class=\"sbook_middle_right_column\"

///

echo "<div class=\"flex-container\">";
    echo "<div class=\"sbook_left_column\">";

echo "<ol>";
foreach($activity->qa as $qa1) { 
  
$array_qa[] = $qa1;
shuffle ($array_qa);
}

foreach($array_qa as $qa) { 
//foreach($array_qa as ${qa.$uniq_div_from_activity_title}) { 
if (trim($qa->qs) != null) {

$string = trim($qa->qs); 
$full_string_wo_spaces = trim(preg_replace("/[^\da-z]/i",'_',$string )); // use as a unique identifier
//$string_wo_spaces = trim(preg_replace("/[^\da-z]/i",'_',$string));
$string2 = trim($qa->ans); // 20220125-1234
$string_wo_spaces = trim(preg_replace("/[^\da-z]/i",'_',$string2));
$box01 = "<div style=\"float: left; position: relative; width: 70%; margin-left: -35%; padding: 0.8em\">";
//$box01 = "<div style=\"float: left; position: relative; width: 100%; margin-left: -35%; padding: 0.8em\">";
//$box01 = "<div style=\"float: left; position: absolute; width: 100%; margin-left: -35%; padding: 0.8em\">";
$box01 = $box01. "<div id=\"div2mov_cards_box01_".$uniq_div_from_activity_title.$full_string_wo_spaces.$string_wo_spaces."\">";
$box01 = $box01.  "<span contenteditable=\"true\">".$string."</span>";
$box01 = $box01. "</div>";
$box01 = $box01. "</div><br />";

echo $box01."<br />"; // place before script or else will fail!
//reset($array_qa); // no difference

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

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

echo "<style>\n";
echo "#div2mov_cards_box01_".$uniq_div_from_activity_title.$full_string_wo_spaces.$string_wo_spaces." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "margin-right: -8%;\n";
//echo "min-width: 60%;\n";
echo "width: 100%;\n";
//echo "display: instring-block;\n";
//echo "display: instring;\n";
echo "display: block;\n";
//echo "float: left;\n";
echo "padding: 0.1em;\n";
echo "text-align: center;\n";
echo "cursor: pointer;\n";
//echo "color: #efefef;\n";
echo "color: black;\n";
echo "font-size: 120%;\n";
echo "padding: 0.1em;\n";
echo "padding-bottom: 0.1em;\n";
echo "border: 1px dotted grey;\n";
echo "background-color: #dbd039;\n";
//echo "background-color: #cdcdcd;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
echo "}\n";
echo "</style>\n";
}
} // foreach($array_qa as $qa)
echo "</ol>\n";
    echo "</div><!-- end sbook_left_column -->\n";

    // echo "<div class=\"sbook_middle_right_column\" style=\"width: 75%; font-size: 120%;\">\n"; sbook b13-01
    echo "<div class=\"sbook_middle_right_column\" style=\"width: 70%; font-size: 120%;\">\n";
     echo "<pre class=\"sbook_lesson_plan\">"; // XXXXXXX check if still needed in sbook
echo "<ol>";
foreach($activity->qa as $qa) { 
if (trim($qa->qs) != null) {

  echo "<li><span class=\"show_key_sbook\">".trim($qa->qs)."</span></li>";
if ($qa->ans != null) {
$enotes3_activity_title = trim(preg_replace("/[^\da-z]/i", '',$activity->activity_title));
//$enotes3_ref = preg_replace("/[^A-Za-z0-9]/", '', $qa->qs);
$enotes3_ref = preg_replace("/[^\da-z]/i", '', $qa->qs);
$enotes3_ref = trim($enotes3_ref);

echo "<button style=\"float: left; cursor: pointer;\" class=\"button_toggle_visibility_edit_notes03\" onclick=\"toggle_visibility('toggle_edit_notes3_".$enotes3_activity_title.$enotes3_ref."');\" id=\"button_toggle_visibility_edit_notes03\" onclick=\"toggle_visibility('toggle_edit_notes3_".$enotes3_activity_title.$enotes3_ref."');\"><img src=\"pix/icons8-communicate-100.png\" width=\"35em\" border=\"0\" alt=\"Add notes\" /><!--Add some notes here--></button>";
//echo "<span class=\"show_key_sbook\">".$qa->ans."</span>\n";
echo "<div contenteditable=\"true\">".$qa->ans."</div>\n";

if (trim($qa->hint) != null) {
echo "<span style=\"font-style: italic; font-size: 75%;\">".$qa->hint."</span>\n";
}
}

// foreach loop continues
$enotes3_ref = preg_replace("/[^\da-z]/i", '', $qa->qs);
$enotes3_ref = trim($enotes3_ref);

echo "<div id='toggle_edit_notes3_".$enotes3_activity_title.$enotes3_ref."' style=\"display:none;\">";
//echo "<br />\n";
//echo "<div contenteditable=\"true\">".$qa->ans."</div>";
echo "<div contenteditable=\"true\"> </div>";
echo "</div><!-- /toggle_visibility_edit_notes -->\n";
}
}
echo "</ol>\n";

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

reset($array_qa); // no difference
reset($qa1); // no difference
?>
