<?php
echo "<div class=\"flex-container\">";
    echo "<div class=\"sbook_left_column\">\n";
        echo "<div class=\"sbook_reading\"> &nbsp; ".$clog_activity->activity_title."</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\">".$clog_activity->activity_id."</span> <span class=\"sbook_instructions\">".$clog_activity->instructions."</span>";
  $instructions_demo = trim($clog_activity->instructions_demo);
  if (!empty($clog_activity->instructions_demo))  {
    echo "<div class=\"sbook_instructions_demo\">".$clog_activity->instructions_demo."</div>";
  }
echo "<br />";

//
$activity = $clog_activity;
    include ('js/swap_divs_w_click.js');
//echo "<div id=\"swapper-first_".$uniq_div_from_activity_title."\" style=\"display:block; float: left; width: 40%;\">";
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=\"Prep\" />  Prep</a>\n";

echo "<div class=\"flex-container\">";
echo "<div style=\"float: left;\">\n";
foreach($activity->qa as $qa) { 
if ($qa->qs != null) {
  //echo "<li>".$qa->qs."</li>";
  echo $qa->qs."\n";
}
}
echo "</div>\n";
echo "<div style=\"margin-left: 3em;\">\n";
foreach($activity->qa as $qa) { 
if ($qa->ans != null) {
  //echo "<li>".$qa->ans."</li>";
  echo $qa->ans."\n";
//  echo "<span class=\"show_key_sbook\">".$qa->ans."</span><br />\n";
}
}
echo "</div>\n";
echo "</div> <!-- end flex-container -->\n";
echo "<div style=\"clear: both\"></div>";


    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');
    // include ('sbook_plugins/take_notes_floating02.inc'); // see prep_2_columns.inc_wip_todo_2columns_in_blob

echo "</div><!-- end swap other -->\n";

//$fileNameToSaveAs = `date +%Y%m%d`."_{$sbook}_ref_notes_{$member}.txt";
$activity_title = trim(preg_replace("/[^\da-z]/i", '_',$activity->activity_title));
$fileNameToSaveAs = $sbook_ref."_".$activity_title."_notes_".$member."_".date('Ymd_His').".txt";
include ('js/save_text_as_file.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 "left: -80%; /*-16em; */";
echo "width: 170%;";
echo "display: inline-block;\n";
echo "box-shadow: 0px 0px 4px 2px #052a3a;\n";
echo "resize: both;";
echo "height: 20em; /*30em;*/"; 
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;";
echo "}\n";
// Hide scrollbar for IE and Edge
echo "#div2mov_cards".$uniq_div_from_activity_title." {";
echo "ms-overflow-style: none;";
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 sbook_middle_right_column -->\n";
echo "</div> <!-- end flex-container -->\n";
?>

<script>
function saveTextAsFile02()
{
var textToWrite = document.getElementById("inputTextToSave02").value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs02").value;

var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement02;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}

function destroyClickedElement02(event)
{
document.body.removeChild(event.target);
}


function loadFileAsText02()
{
var fileToLoad02 = document.getElementById("fileToLoad02").files[0];

var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) 
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave02").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad02, "UTF-8");
}
</script>

