docHLIN102 : CV en HTML et Quizz avec Javascript/JQuery
download 
Plainte Transcription
HLIN102 : CV en HTML et Quizz avec Javascript/JQuery
HLIN102 : CV en HTML et Quizz avec Javascript/JQuery
Pierre Pompidor
Exemple de CV en HTML :
<!doctype html>
<html>
<head>
<meta charset="UTF8" />
<style>
#global {width: 800px; margin-left: auto; margin-right: auto; }
body { font-size: 14pt; }
div { margin: 20px; }
span { font-weight: bold; background: lightgreen; padding: 5px; margin: 10px; }
span[name="civilite"] { font-size: 18pt; background: yellow; margin: 100px 10px; }
table { font-size: 12pt; }
</style>
</head>
<body>
<div id="global">
<div>
<span name="civilite">James Bond </span> (matricule 007)
</div>
<div align="right">
<span> Expérience professionnelle : </span>
<ul>
<li> Profession : <b> agent secret </b> </li>
<li> Dernier employeur : MI6 </li><br/>
<li> Liste des missions : </li>
<table border="1">
<tr> <th> Année(s) </th> <th> Nature de la mission </th> </tr>
<tr> <td> 1954 </td> <td> Neutralisation d’un dangereux amnésique (le Chiffre) </td
<tr> <td> 1961 </td> <td> Prévention d’une catastrophe nucléaire </td> </tr>
<tr> <td> 1962 </td> <td> Démantèlement d’une organisation criminelle </td> </tr>
</table>
</ul>
</div>
<div>
<span> Compétences : </span>
<ul>
<li> Permis B <i>(certificat d’aptitude à la conduite rapide)</i> </li>
<li> Langues parlées </li>
<ul>
<li> Couramment : le russe et le japonais </li>
<li> Notions : Danois </li>
</ul>
<ul>
</div>
1
<div align="right">
<span> Hobbies : </span>
<ul>
<li> Spécialiste mondial du vodka-martini au shaker </li>
<li> Conversation mondaine en présence d’un public féminin </li>
<ul>
</div>
</div>
</body>
</html>
Quizz en Javascript/JQuery :
<html>
<head>
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<script>
function memoriseReponse(question, score) {
localStorage.setItem(question, score);
}
function correctionQuizz() {
var scoreTotal = 0;
var nb = localStorage.length;
for (var i=0; i < nb; i++) {
var question = localStorage.key(i);
var score
= localStorage.getItem(localStorage.key(i));
scoreTotal += parseInt(score);
}
$(’body’).append("<h2> Votre score total est "+scoreTotal+"</h2>");
}
$().ready(function(){
$.getJSON("quizz_James_Bond.json", function(data) {
var html = "<h2> Quizz sur "+ data[’Theme’] +"</h2>";
html += "<form> <ul>";
$.each(data[’questions’], function(i) {
donnees = data;
html += "<li>"+data[’questions’][i].question+"</li><ol>";
$.each(data[’questions’][i].reponses, function(j) {
var score = data[’questions’][i].reponses[j].score;
html += "<li>" + data[’questions’][i].reponses[j].choix + "<input t
});
html += "</ol><br/>";
});
html += "</ul><input type=’button’ value=’Va voir ton score !’ onClick=’cor
html += "</form>";
$(’body’).append(html);
}).error(function(jqXHR, textStatus, errorThrown) { alert("error : "+ textStatus
});
</script>
</head>
<body>
</body>
</html>
2
