<?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_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>";
        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 "<div class=\"flex-container\"><!-- this is flex-container 2 -->"; // flex container before loop to avoid lines overlapping

$key = $file;
$strings = explode ("\n", $key);

foreach ($strings as $expression) {
$full_string = trim($expression); // use as a unique identifier
$string2 = explode (" ", trim($expression));
shuffle ($string2);
$i = 1; // autoincrement to create unique identifier for single letters

//echo "<div class=\"flex-container\"><!-- this is flex-container 3 -->";

foreach ($string2 as $string) {
$i++;

echo "<div class=\"flex-container\"><!-- this is flex-container 3 -->";

$full_string_wo_spaces = trim(preg_replace("/[^\da-z]/i",'_',$full_string)); // use as a unique identifier
$string_wo_spaces = trim(preg_replace("/[^\da-z]/i",'_',$string));
$box01 = "<div style=\"position: relative; width: 100%; 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%; padding: 0.8em\">";
$box01 = $box01. "<div id=\"div2mov_cards_box01_".$uniq_div_from_activity_title.$full_string_wo_spaces.$string_wo_spaces.$i."\">";
$box01 = $box01.  "<span contenteditable=\"true\">".$string."</span>";
$box01 = $box01. "</div>";
$box01 = $box01. "</div> &nbsp; ";

echo $box01.""; // place before script or else will fail!
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.$i."')));";
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.$i." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
echo "margin-right: -8%;\n";
//echo "display: inline-block;\n";
//echo "display: instring-block;\n";
//echo "display: instring;\n";
//echo "display: block;\n";
//echo "float: left;\n";
echo "padding: 2.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-left: 0.6em;\n";
echo "padding-right: 0.6em;\n";
echo "padding-bottom: 0.1em;\n";
echo "border: 1px dotted grey;\n";
//echo "mini-width: 10%;\n";
//echo "background-color: #dbd039;\n";
echo "opacity: 0.9;\n";
echo "filter: alpha(opacity=90);\n"; // For IE8 and earlier
echo "background-image: linear-gradient(to bottom right, #cdcdcd, #dbd039);\n";
//echo "background-color: #cdcdcd;\n";
echo "box-shadow: 0px 0px 3px 0px #052a3a;\n";
echo "}\n";
echo "</style>\n";

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

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

//echo "<div style=\"float: left;\">\n";
echo "<div style=\"float: left;\">\n";
//echo "&nbsp;<br /><br />";
echo " &nbsp; ";
echo "</div>";
}
echo "</div> <!-- end flex-container 2 -->\n";

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

echo "<br /><img src=\"pix/icons8-key-50.png\" width=\"35em\" border=\"0\" alt=\"key to exercise\">";
echo "<div contenteditable=\"true\"><span class=\"show_key_sbook\">".$key."<br />";

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

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