<?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."\"> &nbsp; ".$activity->activity_title."</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: #ababad;
}
</style>

<?php

  }
  else {     echo "<div class=\"sbook_reading\"> &nbsp; ".$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\">".$activity->activity_id."</span> <span class=\"sbook_instructions\">".$activity->instructions."</span>";
  $instructions_demo = trim($activity->instructions_demo);
  if (!empty($activity->instructions_demo))  {
    echo "<div class=\"sbook_instructions_demo\">".$activity->instructions_demo."</div>\n";
  }
  if (!empty($activity->instructions02))  {
    echo "<span class=\"sbook_instructions02\">".$activity->instructions02."</span>";
  }
echo "<br />\n";

//
///
$list_of_qas = trim($activity->qas);
// adapted from xml_load_file_ref_sbook.inc $list_of_popup_definitions
//$list_of_qas = preg_replace('/ =.*$/m', ' ', $list_of_qas); // definitions need replacing ; 
$list_of_qas = preg_replace('/;/m', ' |', $list_of_qas); // definitions are someX separated by ; which create 2 defs
$list_of_qas = preg_replace('/[\r\n]+/m', ';', $list_of_qas); // end of lines need better delimiter
$list_of_qas = explode(';',($list_of_qas)); // explode needs ; rather than \r\n
shuffle ($list_of_qas);
        echo "<div class=\"flex-container\" contenteditable=\"true\" max-width=\"10em;\" style=\"white-space: pre-wrap;\">";
foreach($list_of_qas as $qas) { 
$ans = preg_replace('/ =.*$/m', '', $qas); // definitions need replacing ; 
$qs = preg_replace('/^.*=/m', '', $qas); // definitions need replacing ; 
    //echo "<span style=\"margin: 0.3em; border: solid 1px; padding: 0.5em\">".trim($qs)."</span>";
//    echo "<span style=\"margin: 0.3em; border: solid 1px; padding: 0.5em\">".trim($qs).trim($ans)."</span>";

    echo "<span style=\"margin: 0.3em; border: solid 1px; padding: 0.5em\"><span class=\"sbook_word_needing_popup\" style=\"font-size: 80%\">".$qs."</span><div class=\"sbook_definition_of_word_needing_popup\">".$ans."</div></span>";
}
        echo "</div>";
///
        echo "<div contenteditable=\"true\">";
echo $activity->activity_contents;
        echo "</div>";
//
    echo "</pre>";
    echo "</div><!-- end sbook_middle_right_column -->\n";
echo "</div> <!-- end flex-container -->\n";
?>
