HTML email template

sy

sylwekb 30 Aug, 2016

Hello Bob. Do you have any idea how to make a template for a project to show themselves in an e-mail response to questions in the form of colored squares? The scenario is that in the form on pages 18 multipage a total of 180 questions (there are 4 answers a,b,c,d to choose from, one correct, incorrect three. The first page of multipage forms to enter personal data.
Each prawidłowaz answer 1 point, incorrect 0 points.
Underneath it should be given the sum of points obtained from all the form and level - a group based on the amount uzysaknych points.
How to perform a template for a project with these squares, the sum of points and levels - group?

Gr

GreyHead 30 Aug, 2016

Hi sylwekb,

I've never tried to do anything like that - but it looks as if you could do it with a table and some CSS to set the colours. Are there 'right' and 'wrong' answers - that might need three colours.

Bob

sy

sylwekb 30 Aug, 2016

I think I was able to write such a script. Only if it works in that form in the Setup and Admin Client template email ChronoForms?
Please look code bottom:

<script src="https://code.jquery.com/jquery-3.1.0.min.js" ></script>
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#maintable {
	width:313px;
	height:auto;
	overflow:auto;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:30px;
}
#toptable {
	width:305px;
	height:auto;
	overflow:auto;
	margin:0 auto;
	border-right:1px solid black;	
	border-top:1px solid black;	
}
.boxg {
	width:60px;
	height:auto;
	overflow:auto;
	float:left;
	text-align:center;
	padding:10px 0 10px 0;
	border-left:1px solid black;
}
#bottomtable {
	width:305px;
	height:auto;
	overflow:auto;
	margin:0 auto;
	border-right:1px solid black;	
	border-top:1px solid black;	
}
.boxd {
	width:60px;
	height:auto;
	overflow:auto;
	float:left;
	text-align:center;
	padding:10px 0 10px 0;
	border-left:1px solid black;
	border-bottom:1px solid black;
}
</style>
</head>

<body>

<div id="maintable" >

  <div id="toptable" >
  
  	<div class="boxg" >NO</div>
    
    <div class="boxg" >A</div>
    
    <div class="boxg" >B</div>
    
    <div class="boxg" >C</div>
    
    <div class="boxg" >D</div>
  
  </div>
    
  <div id="bottomtable" >
  
  	<?php 
	
	$i = 1;
	
	while ($i <= 180) {
		
		echo '<div class="boxdRZAD" id="no" >';
		
		echo '<div class="boxd" >'.$i.'</div>';
		
		echo '<div class="boxd reply" style="cursor:pointer; color:#FFF" >A</div>';
		
		echo '<div class="boxd reply" style="cursor:pointer; color:#FFF" >B</div>';
		
		echo '<div class="boxd reply" style="cursor:pointer; color:#FFF" >C</div>';
		
		echo '<div class="boxd reply" style="cursor:pointer; color:#FFF" >D</div>'; 
		
		echo '</div>'; 		
		
    $i++; 
	
	}
	
	?>
      
  </div>

</div>

</body>
</html>

<script>

$( document ).ready(function() {



$(".odpowiedz").click( function() {
	
	$(this).parent(".boxdRZAD").children().css("background-color","white");	
		
	$(this).css("background-color","#096");
	
	twojaOdpowiedz = $(this).text();
	
	$(this).parent(".boxdRZAD").attr("id",yourReply);
	
});



});
 
</script>

This topic is locked and no more replies can be posted.