HTML5 valid, Jquery fonctions working

This commit is contained in:
Némunaire 2012-06-18 17:05:05 +02:00
parent 9b570588d4
commit e86deee36e
3 changed files with 89 additions and 85 deletions

163
index.php
View File

@ -1,127 +1,123 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf8" /> <meta charset="utf-8">
<link rel="Stylesheet" href="style.css" /> <link rel="Stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<title>AskWeb (BETA)</title> <title>AskWeb (BETA)</title>
<script language="javascript"> <script type="text/javascript">
var nbAnswer = 1; var nbAnswer = 1;
function add() function add()
{ {
var element = document.createElement("input"); var element = document.createElement("input");
element.setAttribute("type", "text"); element.setAttribute("type", "text");
element.setAttribute("id", "answer"); element.setAttribute("id", "answer");
element.setAttribute("name", "answer" + nbAnswer); element.setAttribute("name", "answer" + nbAnswer);
nbAnswer++; nbAnswer++;
element.setAttribute("placeholder", "Nouvelle réponse"); element.setAttribute("placeholder", "Nouvelle réponse");
var foo = document.getElementById("answerList"); var foo = document.getElementById("answerList");
foo.appendChild(element); foo.appendChild(element);
} }
function hideShow(which) function hideShow(which)
{ {
if (!document.getElementById) if (!document.getElementById)
return return
if (which.style.display == "block") if (which.style.display == "block")
which.style.display = "none" which.style.display = "none"
else else
which.style.display = "block" which.style.display = "block"
} }
</script> </script>
</head> </head>
<body> <body>
<header> <header id="main_title">
<div id="main_title"> <a href="http://www.h2g2.com" id="banner">
<a href="http://www.h2g2.com" target="_blank"> <img src="marvin-robot_normal.png" alt="Marvin">
<img src="marvin-robot_normal.png" alt="" id="banner"/> </a>
</a> <h1>Nemubot AskWeb (BETA)</h1>
<h1>Nemubot AskWeb (BETA)</h1>
</div>
</header> </header>
<section id="introduction"> <section id="introduction">
<a id="hideShow" href=""><img id="arrowHide" <a id="hideShow" href="">
src="topArrow.png" alt="icon"/></a> <img src="topArrow.png" alt="icon">
</a>
<script type="text/javascript"> <script type="text/javascript">
$('#hideShow').click(function (event) { $('#hideShow').click(function (event) {
event.preventDefault(); event.preventDefault();
$('#intro_para').slideToggle("slow"); $('#intro_para').slideToggle("slow");
}); return false;
</script> });
</script>
<article id="bonjour"> <article id="bonjour">
<h2>Bonjour</h2> <h2>Bonjour</h2>
<p id="intro_para"> <p id="intro_para">
Bienvenue sur le site de questions de Nemubot. Vous pouvez ici Bienvenue sur le site de questions de Nemubot. Vous pouvez ici
ajouter de nouvelles questions à Nemubot. Ces questions seront ajouter de nouvelles questions à Nemubot. Ces questions seront
posées sur le chan irc. posées sur le chan irc.
</p> </p>
</article> </article>
<a id="hideShowExp" href="">
<a id="hideShowExp" href=""><img id="arrowHide" <img src="topArrow.png" alt="icon"/>
src="topArrow.png" alt="icon"/></a> </a>
<script type="text/javascript">
<script type="text/javascript"> $('#hideShowExp').click(function (event) {
$('#hideShowExp').click(function (event) { event.preventDefault();
event.preventDefault(); $('#exp_para').slideToggle("slow");
$('#exp_para').slideToggle("slow"); return false;
}); });
</script> </script>
<article id="explications"> <article id="explications">
<h2>Nemubot AskWeb en 3 étapes</h2> <h2>Nemubot AskWeb en 3 étapes</h2>
<div id="exp_para"> <div id="exp_para">
<h3>Nouvelle question</h3> <h3>Nouvelle question</h3>
<p> <p>
Commencez par entrer votre question ainsi que la ou les réponses Commencez par entrer votre question ainsi que la ou les réponses
associées. À noter que : associées. À noter que :
</p>
<ul> <ul>
<li>Il est conseillé d'indiquer plusieurs fois vos réponses <li>
Il est conseillé d'indiquer plusieurs fois vos réponses
avec des variations telles que : "une chaussure" avec des variations telles que : "une chaussure"
et "chaussure"</li> et "chaussure"
<li>Les questions possédant seulement 2 réponses possibles </li>
n'ont pas beaucoup d'intêret</li> <li>
Les questions possédant seulement 2 réponses possibles
n'ont pas beaucoup d'intêret
</li>
</ul> </ul>
</p>
<h3>Confirmer votre question</h3> <h3>Confirmer votre question</h3>
<p> <p>
Une fois la question ajoutée, un email vous a été envoyé pour que Une fois la question ajoutée, un email vous a été envoyé pour que
vous confirmiez qu'il s'agit bien de vous. Cliquez sur le lien vous confirmiez qu'il s'agit bien de vous. Cliquez sur le lien
pour confirmer. pour confirmer.
</p> </p>
<h3>Validation</h3> <h3>Validation</h3>
<p> <p>
Une fois confirmée, un email est envoyé à un autre membre du groupe Une fois confirmée, un email est envoyé à un autre membre du groupe
pour qu'il valide la question. S'il juge votre question fausse pour qu'il valide la question. S'il juge votre question fausse
ou éronée elle n'apparaitra jamais dans les qcm sur le chan. ou éronée elle n'apparaitra jamais dans les qcm sur le chan.
</p> </p>
</div> </div>
</article> </article>
</section> </section>
<section id="hello"> <section id="hello">
<h2>Nouvelle question</h2> <h2>Nouvelle question</h2>
<form id="formulaire" method="post" action="questions.php"> <form id="formulaire" method="post" action="questions.php">
<section id="Form"> <section id="Form">
<aside id="info"> <aside id="info">
<img src="left_triangle2.gif" id="arrow" alt=""/> <img src="left_triangle2.gif" id="arrow" alt="&lt;">
<h3>Quelques détails</h3> <h3>Quelques détails</h3>
<p> <p>
Le champ "De quelle matière s'agit-il ?" n'est là qu'a titre Le champ "De quelle matière s'agit-il ?" n'est là qu'a titre
indicatif. Il va permettre à la personne qui valide votre question indicatif. Il va permettre à la personne qui valide votre question
@ -130,10 +126,9 @@ function hideShow(which)
</aside> </aside>
<article id="list"> <article id="list">
<label for="course">De quelle matière s'agit-il ?</label><br/> <label for="course">De quelle matière s'agit-il ?</label><br>
<select name="course" id="course"> <select name="course" id="course">
<optgroup label="Cours communs"> <optgroup label="Cours communs">
<option value="SGBD">SGBD</option> <option value="SGBD">SGBD</option>
<option value="CompressionDeDonnées"> <option value="CompressionDeDonnées">
@ -169,7 +164,7 @@ function hideShow(which)
</select> </select>
</article> </article>
<aside id="info"> <aside id="quest">
<img src="left_triangle2.gif" id="arrow2" alt=""/> <img src="left_triangle2.gif" id="arrow2" alt=""/>
<h3>La question</h3> <h3>La question</h3>
<p> <p>

4
jquery-1.7.2.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -19,6 +19,7 @@ header
#banner #banner
{ {
display: inline-block; display: inline-block;
margin-top: 10px;
float: right; float: right;
} }
@ -83,8 +84,12 @@ aside
padding-right: 10px; padding-right: 10px;
background-color: #222222; background-color: #222222;
color: orange; color: orange;
text-align: justify;
}
aside#info
{
width: 42%;
} }
#arrow #arrow
{ {
position: absolute; position: absolute;