<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	
	<xsl:output method="html" indent="yes"/>
	
	
	
	<xsl:template match="problemset"><html>
	<head>
	<title><xsl:value-of select="title" /></title>
	<script language="JavaScript">
<![CDATA[<!--
/*
* Scripts par Daniel Lemire, professeur
*/
function showFeedback(Click_MenuId,formid) {
		var Click_Menu = document.getElementById(Click_MenuId);
		var myform = document.getElementById(formid);
		var spans = myform.getElementsByTagName('span');
		for (spancount=0; spancount <spans.length;++spancount) {
			spans[spancount].style.display='none';
		}
		if(/good/.test(Click_MenuId)) {
				  Click_Menu.style.color = "blue";
		} else {
				  Click_Menu.style.color = "red";
		}
		Click_Menu.style.display = "";
}
function showAnswer(formid) {
		var myform = document.getElementById(formid);
		var inputs = myform.getElementsByTagName('input');
		for(inputscount = 0; inputscount < inputs.length; ++inputscount){
			var spanel = document.getElementById(inputs[inputscount].value);
			if(inputs[inputscount].checked) {
			  if(/good/.test(inputs[inputscount].value)) {
				  spanel.style.color = "blue";
				} else {
				  spanel.style.color = "red";
				}
			} else {
				if(/good/.test(inputs[inputscount].value)) {
				  spanel.style.color = "red";
				} else {
				  spanel.style.color = "blue";
				}
			}
			spanel.style.display="";
		}
}
-->]]>
</script>
<style type="text/css"><![CDATA[
			ul.tree > li > ul.tree {
				margin-left: 1em;
				padding-left: 1em;
			}
			ul.tree > li:focus > ul.tree {
				display: block;
			}
			ul.tree > li {
				color: #000;
				cursor: pointer;
				font: 0.8em Arial,Helvetica,sans-serif;
			}
			ul.tree > li > a {
				color: #00f;
				text-decoration: none;
			}
			ul.tree > li > a:hover {
				text-decoration: underline;
			}
		]]></style>
	</head>
	<body>
	<h1><xsl:value-of select="title" /></h1>
	<xsl:apply-templates select="rappel" />
	<h2>Questionnaire d'auto-évaluation</h2>
	<p style="width:20cm;">La page utilise un script qui vérifie vos réponses. S'il n'y a que des commentaires en <span style="color:blue">bleu</span>, alors vous aviez la bonne réponse. Sinon, consultez les
				 commentaires en <span style="color:red">rouge</span> pour voir où vous vous êtes trompé. Si vous avez la mauvaise
				 réponse, vous devez réessayer à nouveau.</p>
				<xsl:apply-templates select="item" />
				<hr />
				<p style="text-align:right"> Vous avez terminé les <xsl:number format="digit" lang="fr" value="count(item)" /> questions de ce questionnaire.</p>
	</body></html></xsl:template>
	
	<xsl:template match="item">
	<div style="margin-left:1cm">
		<div style="background-color:#f0f0f0">
		Question <xsl:number format="digit" lang="fr" count="item" /> de <xsl:number format="digit" lang="fr" value="count(../item)" />.
		<xsl:apply-templates select="question" />
		</div>
		<xsl:choose>
		  <xsl:when test="@type = 'single-response'">
				<p style="width:20cm;">Choisissez la bonne réponse parmi les choix suivants.</p>
			</xsl:when>
			<xsl:when test="@type = 'multiple-response'">
				 <p style="width:20cm;">Choisissez toutes les réponses qui s'appliquent et appuyez sur le bouton pour vérifier votre réponse.
				 </p>
			</xsl:when>
      <xsl:otherwise>
		   bug
		  </xsl:otherwise>
		</xsl:choose>
		<form id="{generate-id(.)}">
			<ol>
				<xsl:for-each select="good|bad">
					<li>
						<xsl:choose>						  
							<xsl:when test="../@type = 'single-response'">
								<input type="radio" value='{generate-id(.)}{name()}' name="{generate-id(..)}" onclick="javascript:showFeedback('{generate-id(.)}{name()}','{generate-id(..)}')" />
								<xsl:apply-templates select="response" />
								<span id="{generate-id(.)}{name()}" style="display: none;font-weight:bold;" class="feedback">
								<br /><xsl:value-of select="feedback" /> 
								</span>
						  </xsl:when>
							<xsl:when test="../@type = 'multiple-response'">
							  <input type="checkbox" value='{generate-id(.)}{name()}' name="{generate-id(..)}"  style="float:left;"
								 />
								 <xsl:apply-templates select="response" />
								<span id="{generate-id(.)}{name()}" style="display: none;font-weight:bold;" class="feedback">
								<br />
								<xsl:apply-templates select="feedback" />
								</span>
							</xsl:when>
	          	<xsl:otherwise>
						<p>Je ne sais pas comment traiter les questions de type <xsl:value-of select="@type" /></p>
						</xsl:otherwise>
						</xsl:choose>
           	
        	</li>
        </xsl:for-each>
				</ol>
				<xsl:if  test="@type = 'multiple-response'">
				<input type="button" class="button" value="Vérifier ma réponse" onclick="javascript:showAnswer('{generate-id(.)}')" />
				</xsl:if>			
		</form>
		</div>
		<hr style="margin-bottom:1cm; margin-top:1cm;color: #0f0;
background-color: #0f0;
height: 5px;"/>

	</xsl:template>
	<xsl:template match="answer">
		<li><input type="checkbox" value='{response}" />' /><xsl:value-of select="response" /> </li>
		
	</xsl:template>
	
	<xsl:strip-space elements="*"/>
	
	<xsl:template match="codexml" >
   <p style="border:solid 1px black;white-space:pre; font-size:0.85em"><xsl:value-of select="."/></p>
</xsl:template>	
	
	
	<xsl:template match="b" >
   <xsl:copy-of select="."/>
</xsl:template>	
	

	<xsl:template match="i" >
   <xsl:copy-of select="."/>
</xsl:template>	

	<xsl:template match="p" >
   <xsl:apply-templates />
</xsl:template>	
	<xsl:template match="section" >
	<h3 class="rappel"><xsl:value-of select="."/></h3>
  <xsl:apply-templates select="*" />
</xsl:template>	

	<xsl:template match="ul" >
   <xsl:copy-of select="."/>
</xsl:template>	

	<xsl:template match="ol" >
   <xsl:copy-of select="."/>
</xsl:template>	
	<xsl:template match="p" >
   <xsl:copy-of select="."/>
</xsl:template>	
</xsl:stylesheet>

