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

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>";
        //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_reading\"> <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>";
  }
  if (!empty($activity->instructions02))  {
    echo "\n<span class=\"sbook_instructions02\">".$activity->instructions02."</span>";
  }
echo "<br />\n";

//
//$file = $clog_activity->activity_contents; // works
$file = $list_of_decks;
//echo $file; // works

// shuffled activity - update todo
// don't use words in activity contents
// use for each $file = $clog_activity-> ... qs ans;
//$words = explode (" ", $file); works
//foreach ($words as $word) {
//  echo "xxxx".$word."yyy<br /><br />";
//}

//echo "<div style=\"background: url(".$background_image.") no-repeat right; background-size: contain;\">\n"; // don't forget div at the end

echo "<div class=\"flex-container\"><!-- this is flex-container 2 -->"; // flex container before loop to avoid lines overlapping

$key = $file;
$sentences = explode ("\n", $file);
shuffle ($sentences);
foreach ($sentences as $sentence) {

$sentence_wo_spaces = trim(preg_replace("/[^\da-z]/i",'_',$sentence));
//$box01 = "<div style=\"float: left; position: relative; width: 150%; 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.$sentence_wo_spaces."\">";
$box01 = $box01.  "<span contenteditable=\"true\">".$sentence."</span>";
$box01 = $box01. "</div>";
$box01 = $box01. "</div>";

echo $box01."\n"; // place before script or else will fail!

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

echo "<style>\n";
echo "#div2mov_cards_box01_".$uniq_div_from_activity_title.$sentence_wo_spaces." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "margin-right: -8%;\n";
echo "display: inline-block;\n";
//echo "display: inline;\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 "mini-width: 10%;\n";
//echo "background-color: #dbd039;\n";
//echo "background-color: #cdcdcd;\n";
echo "background-color: DarkSeaGreen;\n";
echo "box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);\n";
echo "}\n";
echo "</style>\n";

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

//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> <!-- end flex-container -->\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 />";

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

echo "</div>"; // not to print
?>
