<?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>";


  if (!empty(trim($activity->activity_options))
      && (trim($activity->activity_options)) == 'stopwatch')  {
//    include ('sbook_plugins/stopwatch_relative.inc');
}
?>

<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: #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_reading\"> <a id=\"".$activity->hw_anchor."\" name=\"".$activity->hw_anchor."\"> &nbsp; ".$activity->activity_title."</a></div>";
  }

/// move_html5_video.inc
if (!empty(trim($activity->html5_video))) {
$src =(trim($activity->html5_video));
// $xml4tpathmedia2="../../../films/virals_for_elt/"; // local hard disk - mdl config in xml_load_file_course_log.php
if (file_exists($xml4tpathmedia2.$src)) {
// if (file_exists("../../films/virals_for_elt/".$src)) {

  echo "<div id=\"empty_div2mov_cards".$uniq_div_from_activity_title."\">\n"; // mov div
  //echo "<div style=\"background-color: #cdcdcd;\" id=\"div2mov_cards".$uniq_div_from_activity_title."\">\n"; // mov div
  echo "<div id=\"div2mov_cards".$uniq_div_from_activity_title."\">"; // mov div
       //echo "<div style=\"height: 100%;\" class=\"moved_match_2_columns_aa\"><!-- use aa for 40% -->\n"; // 20210427-1901 use 100% to get rid of grey margin at the bottom
echo "<div style=\"height: 100%;\">";// 20210427-1901 use 100% to get rid of grey margin at the bottom

//echo "<video width=\"192\" height=\"144\" controls>\n";
echo "<video width=\"288\" height=\"216\" controls>\n";

echo "<source src=\"".$xml4tpathmedia2.$src."\" type=\"video/mp4\">\n";
//echo "<source src=\"../../films/virals_for_elt/".$src."\" type=\"video/mp4\">\n";
//echo "<source src=\"films/".$src."\" type=\"video/mp4\">\n";
echo "Your browser does not support the video tag.\n";
echo "</video>\n";

echo "</div><!-- end match 2 columns -->\n";
echo "</div><!-- end div2mov -->\n"; // end mov div
echo "</div><!-- end empty div2mov-->\n"; // end empty mov div

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 "top: -4.7em;";
//echo "left: -2%; /* -65% -16em; */";
//echo "float: left;\n";
echo "}\n";
//echo "<div style=\"clear: both;\"></div>\n";

echo "#div2mov_cards".$uniq_div_from_activity_title." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
//echo "float: left;\n";
//echo "top: -14em;";
//echo "bottom: -20em;";
//echo "left: -62%; /* -65% -16em; */";
//echo "width: 100%;";
//echo "display: inline-block;\n";
//echo "background-color: #cdcdcd;\n";
//echo "box-shadow: 0px 0px 4px 2px #052a3a;\n";
//echo "resize: both;";
//echo "width: 288; /*640*/;\n"; 
//echo "height: 216; /*480*/;\n"; 
//echo "overflow-y: scroll;"; 
echo "@media only print {\n";
echo "display: none;\n";
//echo "left: -6em;";
//echo "width: 2em;\n"; 
//echo "height: 1.7em;\n"; 
//echo "width: 192;\n"; 
//echo "height: 144;\n"; 
echo "}\n";
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;"; // 20220321
echo "}\n";
// Hide scrollbar for IE and Edge
echo "#div2mov_cards".$uniq_div_from_activity_title." {";
//echo "ms-overflow-style: none;"; // 20220321
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";
} // if file exists
} // if (!empty(trim($activity->activity_contents)))  

/// move_html5_video.inc
    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_activity_lead_in\">".$activity->activity_lead_in."</span>\n<span class=\"sbook_instructions\">".$activity->instructions."</span>";
        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>";
  }
  if (!empty($activity->instructions02))  {
    echo "\n<span class=\"sbook_instructions02\">".$activity->instructions02."</span>";
  }
//echo "<br />\n";
$activity_background = ($clog_activity->activity_background);
//$activity_background = ($activity->activity_background)."_".($activity->activity_id);
$activity_background_trimmed = preg_replace ('/pix\//m','',$activity_background);
$activity_background_trimmed = preg_replace ('/.jpg/m','',$activity_background_trimmed);
?>
<style type="text/css">
div.activity_background_<?php echo $sbook_ref.'_'.$activity_background_trimmed; ?> {
background: url(<?php echo $activity_background; ?>) no-repeat ;
/*background: linear-gradient(to right, white, transparent 90%); */
/*width: 98%;
height: 35em; */
background-size: cover; /*contain;  */
position: relative; 
/*z-index: 100; */
opacity: 0.9;
filter: alpha(opacity=90);
margin-right : 0%; 
}
@media only print {
div.activity_background_<?php echo $sbook_ref.'_'.$activity_background_trimmed; ?> {
width: 100%;
margin : 0em;
margin-right : -8%; 
/*opacity: 0.2;
filter: alpha(opacity=20); */
}
}
</style>
<?php
    echo "<div class=\"activity_background_$sbook_ref"."_"."$activity_background_trimmed\"><ol>";
//echo "<ol>";
foreach($activity->qa as $qa) { 
if (trim($qa->qs) != null) {
// stopwatch
  if (!empty(trim($activity->activity_options))
      && (trim($activity->activity_options)) == 'stopwatch')  {
    include ('sbook_plugins/stopwatch_relative2.inc');
}
// stopwatch
  echo "<li>".trim($qa->qs)."</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";

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

// 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 "<br /><div contenteditable=\"true\"><span style=\"background-color: #cdcd; font-size: 120%; color: blue;\";>                                                                              </span></div>";
echo "</div><!-- /toggle_visibility_edit_notes -->\n";
}
}
echo "</ol>\n";

///
    echo "</pre>";
    //echo "</div>"; // end of <div class=\"activity_background\">";

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

?>
