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

View File

@ -1,13 +1,12 @@
<!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()
{ {
@ -23,38 +22,35 @@
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>
@ -67,34 +63,36 @@ function hideShow(which)
</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 :
<ul>
<li>Il est conseillé d'indiquer plusieurs fois vos réponses
avec des variations telles que : "une chaussure"
et "chaussure"</li>
<li>Les questions possédant seulement 2 réponses possibles
n'ont pas beaucoup d'intêret</li>
</ul>
</p> </p>
<ul>
<li>
Il est conseillé d'indiquer plusieurs fois vos réponses
avec des variations telles que : "une chaussure"
et "chaussure"
</li>
<li>
Les questions possédant seulement 2 réponses possibles
n'ont pas beaucoup d'intêret
</li>
</ul>
<h3>Confirmer votre question</h3> <h3>Confirmer votre question</h3>
<p> <p>
@ -116,12 +114,10 @@ function hideShow(which)
<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;