Vous êtes sur la page 1sur 10

XML ET OUTILS

Sujet

Projet: Quiz en
ligne

Réalisé par :
Ezzin Houssam

Choukri Ayoub

Bakloul Imad

Lafredi Said

Sougni Achraf

Année universitaire : 2020/2021

Projet XML et outils Page 1


PLAN

I. Outils utilisés.

II. Arborescence.

III. DTD.

IV. Document Xml utilisé.

V. Document XSL de transformation.

VI.ScreenShots du site.

VII. De XML Vers HTML.

VIII.Utilisation du lecteur xml du


langage java.

Projet XML et outils Page 2


I. Outils utilisés :
Afin effectuer ces TPs nous avons
utilisé l’outil Oxygen XML Editor pour
vérifier si nos fichier sont valides et bien
formé ainsi que générer l’arbre
correspondant au code xml.

Nous avons aussi utilisé Talend


(TOS_DI- win-x86_64) pour agréger
plusieurs flux RSS en un seul.
seul.

II. Arborescence :
III. DTD :
Voici le contenu du fichier  questionnaire.dtd  :

<?xml version="1.0" encoding="UTF-8"?>


<!ELEMENT questionnaires (questionnaire+) >
<!ELEMENT questionnaire (titre, questions) >
<!ELEMENT questions (question+) >
<!ELEMENT titre (#PCDATA) >
<!ELEMENT question (enonce, reponse+) >
<!ELEMENT enonce (#PCDATA) >
<!ELEMENT reponse (#PCDATA) >
<!ATTLIST questionnaire niveau (debutant) #REQUIRED numero ID
#REQUIRED>
<!ATTLIST reponse id ID #REQUIRED score CDATA #REQUIRED >

IV. Document Xml utilisé :


questionnaire.xml :

<?xml version="1.0" encoding="UTF-8"?>


<?xml-stylesheet type="text/xsl" href="quiz.xsl"?>
<!DOCTYPE questionnaires SYSTEM "questionnaire.dtd">
<questionnaires>
<questionnaire niveau="debutant" numero="n1">
<titre>Questionnaire débutant</titre>
<questions>
<question>
<enonce>Je dois acheter_______ livres pour demain</enonce>
<reponse id="q1R1" score="0">un</reponse>
<reponse id="q1R2" score="1">des</reponse>
<reponse id="q1R3" score="0">que</reponse>
<reponse id="q1R4" score="0">ce</reponse>
</question>
<question>
<enonce>L'avion décole_______midi</enonce>
<reponse id="q2R1" score="0">dans</reponse>
<reponse id="q2R2" score="0">au</reponse>
<reponse id="q2R3" score="1">à</reponse>
<reponse id="q2R4" score="0">sur</reponse>
</question>
<question>
<enonce>je ne sais pas________chaussures mettre</enonce>
<reponse id="q3R1" score="0">quelle</reponse>
<reponse id="q3R2" score="0">qu'elle</reponse>
<reponse id="q3R3" score="1">quelles</reponse>
<reponse id="q3R4" score="0">quel</reponse>
</question>
<question>
<enonce>Le voyant rouge ne s'allume________freinant</enonce>
<reponse id="q4R1" score="0">quand</reponse>
<reponse id="q4R2" score="0">quant</reponse>
<reponse id="q4R3" score="0">que</reponse>
<reponse id="q4R4" score="1">qu'en</reponse>
</question>
<question>
<enonce>Mets________vétements chauds.</enonce>
<reponse id="q5R1" score="0">c'est</reponse>
<reponse id="q5R2" score="0">ce</reponse>
<reponse id="q5R3" score="1">ces</reponse>
<reponse id="q5R4" score="0">que</reponse>
</question>
<question>
<enonce>c'est________que j'ai eu mon accident.</enonce>
<reponse id="q6R1" score="0">la</reponse>
<reponse id="q6R2" score="0">las</reponse>
<reponse id="q6R3" score="1">là</reponse>
<reponse id="q6R4" score="0">l'as</reponse>
</question>
<question>
<enonce>Ne reste pas________rien faire</enonce>
<reponse id="q7R1" score="1">sans</reponse>
<reponse id="q7R2" score="0">son</reponse>
<reponse id="q7R3" score="0">sont</reponse>
<reponse id="q7R4" score="0">sang</reponse>
</question>
<question>
<enonce>il y a ______ de notions à retenir</enonce>
<reponse id="q8R1" score="0">temps</reponse>
<reponse id="q8R2" score="0">ton</reponse>
<reponse id="q8R3" score="1">tant</reponse>
<reponse id="q8R4" score="0">t'en</reponse>
</question>
<question>
<enonce>j'aurais bien mangé_________fruits, mais il n'y en a
plus</enonce>
<reponse id="q9R1" score="0">de</reponse>
<reponse id="q9R2" score="1">des</reponse>
<reponse id="q9R3" score="0">de la</reponse>
<reponse id="q9R4" score="0">la</reponse>
</question>
<question>
<enonce>J'ai travaillé toute la nuit. J'ai
besoin_________repos.</enonce>
<reponse id="q10R1" score="0">d'un</reponse>
<reponse id="q10R2" score="0">le</reponse>
<reponse id="q10R3" score="1">de</reponse>
<reponse id="q10R4" score="0">du</reponse>
</question>
</questions>
</questionnaire>
</questionnaires>

V. Document XSL de transformation :


quiz.xsl  :
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="xs"
version="2.0">
<xsl:template match="/">
<head>
<title>Quizz</title>
<link rel="shortcut icon" type="text/css" href="icon.ico"/>
<link href="style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/css/bootstrap.min.css"
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6
M" crossorigin="anonymous"/></head>
<body>
<div style="padding:30px;background-color:#16A085;">

<div >
<h1 style="color:white;text-align:center;">Are you ready to attempt the quizz?</h1>
<br/>
<div id="menu" style="text-align:center;">
<ul>
<li class="menu">
<a href="#" onclick="$('#score').hide();$('#start').fadeIn();$
('.questionnaire').hide();">Accueil</a></li>
</ul>
</div>
</div>

</div>

<div class="container" style="padding:50px;">


<div class="row" >
<div class="col-sm-6" style="text-align:center;">
<div class="title"><h3>Description</h3></div>
<p>Ce quizz est un QCM qui vise les connaissances en langue
francaise, il ya 10 questions notées 1 point chaqu'une</p>
</div>
<div class="col-sm-6" style="text-align:center;">
<div class="title"><h3>Consignes</h3></div>
<p>Lire la question attentivement et puis écrit le numéro de la
bonne réponse dans la case réponse. clique sur résultats</p>
</div>
</div>
</div>
<hr/>
<div style="text-align: center;">
<button id="start" class="btn btn-primary" style="margin-top:20px;background-
color:#16A085;" onclick="$('.questionnaire').hide();$('.debutant').fadeIn();$('#start').hide();">attempt
quizz now</button>
</div>
<div style="margin-bottom:100px;">
<xsl:for-each select="questionnaires/questionnaire">
<xsl:variable name="niveau" >
<xsl:value-of select="@niveau"/>
</xsl:variable>

<div class="{@niveau} container questionnaire" style="display:none;">


<h2 ><xsl:value-of select="position()"/>-<xsl:value-of select="titre"/>:</h2>
<div class="row" >
<xsl:for-each select="questions/question">
<div class="col-sm-6">
<div class="rounded" style="box-shadow:0 0 8px
#16A085;padding:20px;margin-top:20px;margin-bottom:15px;height:210px;">
<p style="text-decoration:underline;"><strong
style="color:#16A085;"><xsl:value-of select="position()"/>- </strong><xsl:value-of
select="enonce"/></p>
<ul id="{$niveau}" style="list-style-type: none;margin-left:25px;">

<xsl:for-each select="reponse">
<li class="{@score}"><strong><xsl:value-of select="position()-1"/>)-
</strong><xsl:value-of select="child::text()"/>.</li>
</xsl:for-each>
</ul>
</div>

<input class="form-control {$niveau}" type="text" placeholder="Repondez 0,


1, 2 ou 3" style="width:50%;background-color:white;" />
<xsl:for-each select="reponse">
<xsl:if test="@score=1">
<span class="reponse"><span style="font-weight:bold;">Reponse:
</span><span style="color:green;"><xsl:value-of select="child::text()"/>.</span></span>
</xsl:if>

</xsl:for-each>

</div>

</xsl:for-each>

</div>

<button class="btn btn-primary result" style="float:right;margin-top:20px;background-


color:#16A085;" onclick="resultat({position()});$('#score').fadeIn();">Résultat</button>
</div>

</xsl:for-each>
<h2 id="score" style="margin-top:100px;margin-bottom:150px;text-align:center;"></h2>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-
b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-
h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>

<script>
$('.reponse').hide();
$('.questionnaire').hide();
$("#score").hide();

function resultat(position){
$("#score").hide();
if(position==1){
var score=0;
var reponse=$(".debutant input");
var suggest=$(".debutant ul");
var i=0;
var full=true;
var valeurFausse=false;
for(var r of reponse){
if(r.value == "")
full=false;

else if(r.value==0){
score+=parseInt(suggest[i].getElementsByTagName('li')[0].className);

}
else if(r.value==1){
score+=parseInt(suggest[i].getElementsByTagName('li')[1].className);

}
else if(r.value==2){
score+=parseInt(suggest[i].getElementsByTagName('li')[2].className);

}
else if(r.value==3){
score+=parseInt(suggest[i].getElementsByTagName('li')[3].className);

}
else valeurFausse=true;
i++;
}

}
else if(position==2){
var score=0;
var reponse=$(".intermediaire input");
var suggest=$(".intermediaire ul");
var i=0;
for(var r of reponse){
if(r.value == "")
full=false;

else if(r.value==0){
score+=parseInt(suggest[i].getElementsByTagName('li')[0].className);

}
else if(r.value==1){
score+=parseInt(suggest[i].getElementsByTagName('li')[1].className);

}
else if(r.value==2){
score+=parseInt(suggest[i].getElementsByTagName('li')[2].className);

}
else if(r.value==3){
score+=parseInt(suggest[i].getElementsByTagName('li')[3].className);

}
else valeurFausse=true;
i++;
}

}
else {
var score=0;
$("#score").hide();
var reponse=$(".expert input");
var suggest=$(".expert ul");
var i=0;
for(var r of reponse){
if(r.value == "")
full=false;

else if(r.value==0){
score+=parseInt(suggest[i].getElementsByTagName('li')[0].className);

}
else if(r.value==1){
score+=parseInt(suggest[i].getElementsByTagName('li')[1].className);

}
else if(r.value==2){
score+=parseInt(suggest[i].getElementsByTagName('li')[2].className);

}
else if(r.value==3){
score+=parseInt(suggest[i].getElementsByTagName('li')[3].className);
}
else valeurFausse=true;
i++;
}

}
if(full==false){
alert("Vous n'avez pas répondu à toutes les questions!");

}
else if(valeurFausse==true){
alert("Vous avez donné une réponse inacceptable!");
}
else{
$('#score').fadeIn();
$('.reponse').fadeIn();
document.getElementById("score").innerHTML="Résultat: "+score+"/"+reponse.length;

}
}

</script>
</xsl:template>
</xsl:stylesheet>