<?php
// create a unique name for css div
if (!empty(trim($activity->activity_background)))  {

$activity_background = ($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);
$activity_background_trimmed = preg_replace ('/.gif/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-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


} // if (!empty(trim($activity->activity_background)))
else {
?>

<style type="text/css">
div.activity_background_<?php echo $sbook_ref.'_'.$activity_background_trimmed; ?> {
background-image: linear-gradient(to bottom right, #70718c, #262861);
opacity: 0.9;
filter: alpha(opacity=90);
margin-right : 0%; 
}
@media only print {
background-image: linear-gradient(to bottom right, #fefbd8, #ffef96);
width: 100%;
margin : 0em;
margin-right : -8%; 
/*opacity: 0.2;
filter: alpha(opacity=20); */
}
}
</style>

<?php
} // else

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: #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));
if (file_exists("../../films/virals_for_elt/".$src)) {

  echo "<div id=\"empty_div2mov_cards_video".$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_video".$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=\"288\" height=\"216\" controls>\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_video".$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_video".$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 "height: 640;"; 
echo "height: 480;"; 
//echo "overflow-y: scroll;"; 
echo "}\n";

// Can't hide scrollbars in Firefox...
// Hide scrollbar for Chrome, Safari and Opera 
echo "#div2mov_cards_video".$uniq_div_from_activity_title."::-webkit-scrollbar {";
//echo "display: none;"; // 20220321
echo "}\n";
// Hide scrollbar for IE and Edge
echo "#div2mov_cards_video".$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_video".$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 "<div class=\"activity_background_$sbook_ref"."_"."$activity_background_trimmed\">";
    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>";
  }
  if (!empty($activity->instructions02))  {
    echo "\n<span class=\"sbook_instructions02\">".$activity->instructions02."</span>";
  }
echo "<br />\n";
/////

$activity = $clog_activity;
    include ('js/swap_divs_w_click.js');
echo "<div id=\"swapper-first_".$uniq_div_from_activity_title."\" style=\"display:block;\">";
    echo "<div class=\"movable_match_2_columns_aa\"><!-- use aa for 40% -->\n";
echo "<a href=\"javascript:SwapDivsWithClick('swapper-first_".$uniq_div_from_activity_title."','swapper-other_".$uniq_div_from_activity_title."')\"><img src=\"pix/icons8-hand-with-pen-100.png\" width=\"35em\" border=\"0\" alt=\"Prepare\" />  Prepare</a>\n";


    echo "<div class=\"activity_background_$sbook_ref"."_"."$activity_background_trimmed\">";
$student_a = trim ($activity->student_a->qa->qs);
if (!empty($student_a))  {
echo "<div class=\"flex-container\">\n";
echo "<div class=\"sbook_column_role_play_a\">\n";

echo "<button id=\"button_toggle_visibility_type01\" onclick=\"toggle_visibility('toggle_type01_student_a_".$activity->activity_id."');\"><img src=\"pix/icons8-weightlifting-100.png\" width=\"35em\" border=\"0\" alt=\"Student A\" />Student A</button>";
echo "<div id='toggle_type01_student_a_".$activity->activity_id."' style=\"display:none;\">\n";

echo "<div class=\"toggle_type01\">";

        echo "<ol>";
foreach($activity->student_a->qa as $qa) { 
if (trim($qa->qs) != null) {
  //echo "<li>".$qa->qs."</li>";
  echo "<li class=\"question_sbook_white\">".$qa->qs."</li>";
  //include ('inc/xml_show_definition.inc');
if ($qa->ans != null) {
  //echo "<span class=\"show_key_sbook\">".$qa->ans."</span><br />\n";
  //echo "<br /><span class=\"show_key_sbook_white\">".$qa->ans."</span><br />\n"; // use <br /> to cope w/ display: inline-block
}
if (trim($qa->hint) != null) {
echo "<span style=\"font-style: italic; font-size: 75%;\">".$qa->hint."</span>";
}
echo "<br />\n";
} // if (trim($qa->qs) != null)
}
        echo "</ol>";
  echo "</div> <!-- end of column_role_play_a -->\n";
echo "</div><!-- /class toggle_type01 -->\n";
echo "</div><!-- /toggle_visibility_type01 -->\n";

echo "<div class=\"sbook_column_role_play_b\">\n";
echo "<button id=\"button_toggle_visibility_type01\" onclick=\"toggle_visibility('toggle_type01_student_b_".$activity->activity_id."');\"><img src=\"pix/icons8-lightweight-100.png\" width=\"35em\" border=\"0\" alt=\"Student B\" />Student B</button>";
echo "<div id='toggle_type01_student_b_".$activity->activity_id."' style=\"display:none;\">\n";
echo "<div class=\"toggle_type01\">";
        echo "<ol>";
foreach($activity->qa as $qa) { 
  echo "<li class=\"question_sbook_white\">".$qa->qs."</li>";
  //include ('inc/xml_show_definition.inc');
if ($qa->ans != null) {
  //echo "<span class=\"show_key_sbook\">".$qa->ans."</span><br />\n";
  //echo "<br /><span class=\"show_key_sbook_white\">".$qa->ans."</span><br />\n"; // use <br /> to cope w/ display: inline-block
}
        echo "<br />";
}
        echo "</ol>";
    //echo "</div><!-- end of background image -->";
  echo "</div> <!-- end of column_role_play_b -->\n";
echo "</div><!-- /class toggle_type01 -->\n";
echo "</div><!-- /toggle_visibility_type01 -->\n";

echo "</div>"; // endif class=\"flex-container\">\n";

} else {

        echo "<ol>";
foreach($activity->qa as $qa) { 
  echo "<li class=\"question_sbook_white\">".$qa->qs."</li>";
  //include ('inc/xml_show_definition.inc');
if ($qa->ans != null) {
  //echo "<span class=\"show_key_sbook\">".$qa->ans."</span><br />\n";
  echo "<br /><span class=\"show_key_sbook_white\">".$qa->ans."</span><br />\n"; // use <br /> to cope w/ display: inline-block
}
}
        echo "</ol>";
    //echo "</div><!-- end of background image -->";
} // end else if not empty graded contents role a


echo "</div><!-- end class match 2 columns_aa -->\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: 40%; z-index: 1000; width: 25%;\">\n"; // 20210409-0026

///    include ('sbook_plugins/take_notes_floating01.inc');
//take_notes_floating01_qs_and_ans.inc
  echo "<div id=\"empty_div2mov_cards".$uniq_div_from_activity_title."\">\n"; // mov div
  echo "<div id=\"div2mov_cards".$uniq_div_from_activity_title."\">\n"; // 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 align=\"center\"><div class=\"tooltip2\"><h2> 〆 </h2><div class=\"tooltiptext2\"><a style=\"color: white; text-decoration: none;\" href=\"javascript:SwapDivsWithClick('swapper-first_".$uniq_div_from_activity_title."','swapper-other_".$uniq_div_from_activity_title."')\"> Close notes (without saving)</a></div></div>";

echo "<div class=\"tooltip2\"><div class=\"tooltiptext2\">Save as:<input id=\"inputFileNameToSaveAs".$uniq_div_from_activity_title."\" placeholder=\"".`date +%Y%m%d`."_{$sbook_ref}_notes_{$member}.txt\"></div></div> <div class=\"tooltip2\"><button class=\"sbook_btn_save\" onclick=\"saveTextAsFile".$uniq_div_from_activity_title."()\"><div class=\"tooltiptext2\">Save text to file</div></button></div>\n";

echo "</div>\n"; // close align centre

echo "<textarea id=\"inputTextToSave".$uniq_div_from_activity_title."\" style=\"font-size: 140%; width: 100%; height: 100%;\">".$sbook_ref."\n".`date +%Y%m%d`.$activity->activity_title."\n\n";

//  echo $activity->activity_contents;

// echo "Use the following:\n"; // suggested answers // 20210928-1628
foreach($activity->qa as $qa) { 
  //echo "<li>".$qa->qs."</li>";
//  echo "- ".$qa->ans; // 20210928-1628
}
// echo "\n-------------------------------------------\n"; // 20210928-1628

echo "graded questions";
foreach($activity->qa as $qa) { 
if (trim($qa->qs) != null) {
  //echo "<li>".$qa->qs."</li>";
  $qs = preg_replace('/<[^>]*>/',"",$qa->qs);
  echo $qs."\n\n";
if (trim($qa->hint) != null) {
echo $qa->hint."\n\n";
}
} // if (trim($qa->qs) != null)
}

echo "challenging questions";
foreach($activity->student_a->qa as $qa) { 
if (trim($qa->qs) != null) {
  //echo "<li>".$qa->qs."</li>";
  $qs = preg_replace('/<[^>]*>/',"",$qa->qs);
  echo $qs."\n\n";
  //include ('inc/xml_show_definition.inc');

if (trim($qa->hint) != null) {
echo $qa->hint."\n\n";
}
//echo "<br />\n";
} // if (trim($qa->qs) != null)
}
echo "<br />\n";


echo "</textarea><br />\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 "</div><!-- end swap other -->\n";

$activity_id = trim(preg_replace("/[^\da-z]/i", '_',$activity->activity_id));
$activity_title = trim(preg_replace("/[^\da-z]/i", '_',$activity->activity_title));
$fileNameToSaveAs = $sbook_ref."_".$activity_id."_".$activity_title."_notes_".$member."_".date('Ymd_His').".txt";
include ('js/save_text_as_file_w_uniq_div_from_activity_title.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: -62%; /* -65% -16em; */";
echo "width: 170%;";
echo "display: inline-block;\n";
echo "background-color: #cdcdcd;\n";
echo "box-shadow: 0px 0px 4px 2px #052a3a;\n";
echo "resize: both;";
echo "height: 35em;"; 
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;"; // 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";





///
    echo "</pre>";
//    echo "</div><!-- end activity_background_$sbook_ref"."_"."$activity_background_trimmed -->\n";
    echo "</div><!-- end sbook_middle_right_column -->\n";
echo "</div> <!-- end flex-container -->\n";

?>
