Mini Shell

<?php
// require_once("function-file.php");
// require_once("function-menu.php");
require_once("../config.php");
// cookiecheck();
?>
<?php 
$course_id=$_POST['course_id'];
$year = $_POST['year'];
$i = 0;
$data=$conn->prepare("select DISTINCT subject_id from test_papers where year=$year and course_id=$course_id");
$data->execute();$result=$data->fetchall();
$li_list = $content = '';
$subj_array = array();
foreach ($result as $row) {
	//echo "<pre>";print_r($row);echo "</pre>";
	$subject_id = $row['subject_id'];
	$data=$conn->prepare("select subject_name from subjects where subject_id=$subject_id");
	$data->execute();$result1=$data->fetchall();
	foreach ($result1 as $row1) {
		if($i == 0){
			$li_list .= "<li class='tab-link current' data-tab='tab-".$subject_id."'>".$row1['subject_name']."</li>";
		}elseif(!in_array($subject_id, $subj_array)){
			$li_list .= "<li class='tab-link' data-tab='tab-".$subject_id."'>".$row1['subject_name']."</li>";
		}
		array_push($subj_array, $subject_id);
	}
	$datas=$conn->prepare("select DISTINCT chapter_id from test_papers where subject_id=$subject_id and course_id=$course_id and year=$year");
	$datas->execute();$results=$datas->fetchall();
	if($i == 0){
		$content .= '<div id="tab-'.$subject_id.'" class="tab-content current">';
	}else{
		$content .= '<div id="tab-'.$subject_id.'" class="tab-content">';
	}
	foreach ($results as $rows) {
		$chapter_id = $rows['chapter_id'];
		$data=$conn->prepare("select chapter_name from chapters where chapter_id=$chapter_id");
		$data->execute();$result2=$data->fetchall();
		foreach ($result2 as $row2) {
			$cls = ($i % 2 == 0) ? 'left_side' : 'right_side';
			$content .= "<div class='chapter_box ".$cls."'>";
			$content .= "<div class='chapter_heading'>" .$row2['chapter_name']. "</div>";
			$data=$conn->prepare("select * from test_papers where year=$year and chapter_id=$chapter_id");
		    $data->execute();$result3=$data->fetchall();
		    $content .= "<div class='question_box'>";
		    foreach ($result3 as $row3) {
				$content .= "<a href='http://lankavirtualacademy.com/student/test_question.php?que=".$row3['id']."' class='html5lightbox'>".strip_tags($row3['question'],'<img><b><strong><i>')."</a>";
				// $content .= "<a href='#'>".$row3['question']."</a>";
				// $content .= "<br/>";	
		    }
		    $content .= "</div></div>";
		}
	$i++;
	}
	$content .= '</div>';
}
echo "<ul class='tabs'>".$li_list."</ul>";
echo $content;
?>
<style type="text/css">
.chapter_box {
	border: 1px solid #ccc;
	width: calc(50% - 20px);
	float: left;
	margin-bottom: 10px;
	margin-right: 20px;
}
.chapter_box img{ max-width: 100%; }
.chapter_heading {
	padding-left: 5px;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	padding-top: 3px;
	padding-bottom: 3px;
}
.question_box {
	/*padding-top: 5px;
	padding-left: 30px;
	padding-bottom: 5px;*/
}
.question_box > a{
	display: block;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 30px;
	padding-right: 30px;
	color: #41474a;
}
.question_box > a:nth-child(2n+1){
	background-color: #f9f9f9;
}
.question_box > a:hover, .question_box a.active_que{
	background-color: #ccc;
}
ul.tabs{
	/*margin: 0px;*/
	margin-bottom: 20px;
	padding: 0px;
	list-style: none;
	border-bottom: 1px solid red;
}
ul.tabs li{
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
	border: 1px solid red;
	margin-right: 5px;
	border-bottom: 0px;
}
ul.tabs li.current, ul.tabs li:hover{
	background: red;
	color: white;
}
.tab-content{
	display: none;
	/*background: #ededed;*/
	/*padding: 15px;*/
	overflow: hidden;
}
.tab-content.current{
	display: inherit;
}

/*@media (max-width: 767px){*/
@media (max-width: 1024px){
	ul.tabs li{ display: block;margin-right: 0; }
	.chapter_box{ width: 100%;margin-right: 0; }
	.chapter_box img{ max-width: 100%; }
}
</style>
<script type="text/javascript">
window.onload = function(){
	$(document).ready(function(){
		$('ul.tabs li').click(function(){
			var tab_id = $(this).attr('data-tab');
			$('ul.tabs li').removeClass('current');
			$('.tab-content').removeClass('current');
			$(this).addClass('current');
			$("#"+tab_id).addClass('current');
		});

		$('.question_box a').click(function(){
			$('.question_box a').removeClass('active_que');
			$(this).addClass('active_que');
			$('body').addClass('lightbox-active');
		})
	})
}
function close_lightbox(){
	$('#html5-close-fullscreen').trigger('click');
	$('#html5-close').trigger('click');
	$('body').removeClass('lightbox-active');
}
</script>

<!-- Reference to html5gallery.js -->
<script type="text/javascript" src="../js/html5lightbox.js"></script>
<style type="text/css">
	div.guide {margin:12px 24px;}
	div.guide span {color:#ff0000; font:italic 14px Arial, Helvetica, sans-serif;}
	div.guide p {margin-left:24px; color:#000000; font:14px Arial, Helvetica, sans-serif;}
	div.guide pre {margin-left:24px; color:#990000;}
	div.guide p.title {margin-left:0px; color:#df501f; font:18px Arial, Helvetica, sans-serif;}
	div.image_tn {float:left;margin-left:12px;}

	#html5-watermark, #html5-close, #html5-close-fullscreen{ display: none !important; }
	#html5box-html5-lightbox > #html5-lightbox-box{ width: 100% !important;height: 100% !important;margin-top: 0 !important; }
	#html5-elem-wrap { height: 100% !important;width: 100% !important;position: fixed !important; }
	#html5-image{ padding: 0 !important; }
	body.lightbox-active{ position: fixed; }
</style>