index.mustache 2.83 KB
<!DOCTYPE html>
<html>
<head>
<style>
.activitytable {
 
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 4px;
}
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transition-duration: 0.5s;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transition-duration: 0.5s;
}

</style>
</head>
<body>

<div class="container" id="madatorysection">
	<div id="accordion">
 		<div class="card">
      		<div class="card-header" style="background-color: rgb(255 255 255);border-bottom:none;">
      			<i id="cccriteria" class="arrow down" data-toggle="collapse" href="#collapseOne" style="cursor:pointer;"></i>&nbsp;&nbsp;
        		<a id="cccriteria" class="card-link" data-toggle="collapse" href="#collapseOne" style="color: black;font-size: medium;">
          		<b>Mandatory Activity Settings</b>
        		</a>
			</div>
      			<div id="collapseOne" class="collapse show" data-parent="#accordion">
        			<div class="card-body">
						<table class="activitytable">
  						<tr>
    					<th>Activity type</th> <th>Completion criteria</th>
		    			</tr>
  							{{{tabledata}}}
						</table>
        			</div>
     			</div>
    		</div>
	</div>

	<div id="accordion1">
		<div class="card">
			<div class="card-header" style="background-color: rgb(255 255 255);border-bottom:none;">
				<i id="cccriteria1" data-toggle="collapse" href="#collapse2" style="cursor:pointer;"></i>&nbsp;&nbsp;
				<a id="cccriteria1" class="card-link" data-toggle="collapse" href="#collapse2" style="color: black;font-size: medium;">
          		<b></b>
        		</a>
      		</div> 
				<div id="collapse2" class="collapse show" data-parent="#accordion1">
        			<div class="card-body">
        	  			<div class="row">
        					<div class="col text-center">
							<button type="button" class="btn btn-info" id="savemandatory">Continue</button>
							<button type="button" class="btn btn-info" id="cancelmandatory">Cancel</button></td></tr>
							</div>
			 			</div>
					</div>
    			</div>
		</div>
	</div>
</div>
</body>
</html>

{{> local_mandatoryactivities/confirmation }}

<script>

 $(document).ready(function(){

		$(document).on('click', '#cccriteria', function(){

				var vals=$('#cccriteria').hasClass('down');
				$('#cccriteria1').click()
				if(vals){
					$('#cccriteria').removeClass('down');
					$('#cccriteria').addClass('right');
				}else{
					$('#cccriteria').removeClass('right');
					$('#cccriteria').addClass('down');
				}
		});
		

		$(document).on('click', '#cancelmandatory', function(){
			
			var rootPath = M.cfg.wwwroot;
			var redirecturl=rootPath+"/course/view.php?id="+{{courseid}};
			location.replace(redirecturl);

		});
 });

</script>