Changed style

This commit is contained in:
Bertrand Cournaud 2012-06-15 00:00:21 +02:00
parent b403eff562
commit 55a9e556ba
2 changed files with 142 additions and 118 deletions

View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf8" />
<link rel="Stylesheet" href="style.css" />
<title>Every Questions (BETA)</title>
<title>Every AskWeb (BETA)</title>
<script language="javascript">
var nbAnswer = 1;
@ -13,9 +13,10 @@
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("id", "answer");
element.setAttribute("name", "answer" + nbAnswer);
nbAnswer++;
element.setAttribute("placeholder", "Enter the new answer");
element.setAttribute("placeholder", "Nouvelle réponse");
var foo = document.getElementById("answerList");
foo.appendChild(element);
@ -30,133 +31,152 @@
<a href="http://www.h2g2.com" target="_blank">
<img src="marvin-robot_normal.png" alt="" id="banner"/>
</a>
<h1>Nemubot Questions (BETA)</h1>
<h1>Nemubot AskWeb (BETA)</h1>
</div>
</header>
<section id="introduction">
<article id="bonjour">
<h2>Bonjour,</h2>
<h2>Bonjour</h2>
Bienvenue sur le site de questions de Nemubot. Vous pouvez ici
ajouter de nouvelles questions à Nemubot. Ces questions seront
posées sur le chan irc.
</article>
<article id="fonctionnement">
<h2>Fonctionnement</h2>
<article id="explications">
<h2>Nemubot AskWeb en 3 étapes</h2>
<p>
Les questions que vous ajoutez vont être soumise à vérification par une
personne tirée au sort parmis la liste des participants du chan.
</p>
<p>
L'un des principes de ces questions est qu'elle aient un rapport
avec les cours dispensés au 2eme semestres et sur lesquelles nous
auront des partiels. Merci de poser des questions qui vont dans
ce sens.
<h3>Nouvelle question</h3>
Commencez par entrer votre question ainsi que la ou les réponses
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>
Un email va être envoyé à cette personne avec votre question et
la/les réponse(s) que vous avez proposé. Cette personne pourra alors
valider votre question et celle ci pourra alors apparaitre sur le chan.
Si elle est refusée, elle sera détruite de la base de données.
<h3>Confirmer votre question</h3>
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
pour confirmer.
</p>
<p>
<h3>Validation</h3>
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
ou éronée elle n'apparaitra jamais dans les qcm sur le chan.
</p>
</article>
</section>
<form id="formulaire" method="post" action="questions.php">
<section id="hello">
<h2>Nouvelle question</h2>
<form id="formulaire" method="post" action="questions.php">
<section id="Form">
<aside id="info">
<img src="left_triangle2.gif" id="arrow" alt=""/>
<h3>Quelques détails</h3>
<section id="Form">
<aside id="info">
<img src="left_triangle2.gif" id="arrow" alt=""/>
<h3>Quelques détails</h3>
<p>
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
d'aller vérifier par lui même la véracité de votre réponse.<br/>
Indiquez la matière sur laquelle porte la question lui permettra
d'aller plus vite.<br/>
<p>
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
d'aller vérifier par lui même la véracité de votre réponse.
</p>
</aside>
</p>
</aside>
<article id="list">
<label for="course">De quelle matière s'agit-il ?</label><br/>
<article id="list">
<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">
<option value="SGBD">SGBD</option>
<option value="CompressionDeDonnées">
Compression de données</option>
<option value="ProtocolesDeLiaisons">
Protocoles De Liaisons</option>
<option value="TYLA">TYLA</option>
<option value="ActiveDirectory">
Active Directory</option>
<option value="GrapheFlotReseau">
Graphes Flots Reseaux</option>
</optgroup>
<optgroup label="Cours communs">
<option value="SGBD">SGBD</option>
<option value="CompressionDeDonnées">
Compression de données</option>
<option value="ProtocolesDeLiaisons">
Protocoles De Liaisons</option>
<option value="TYLA">TYLA</option>
<option value="ActiveDirectory">
Active Directory</option>
<option value="GrapheFlotReseau">
Graphes Flots Reseaux</option>
</optgroup>
<optgroup label="Electif">
<option value="RXAN">RXAN</option>
</optgroup>
<optgroup label="Electif">
<option value="RXAN">RXAN</option>
</optgroup>
<optgroup label="TDA">
<option value="TYLA">TYLA</option>
<option value="CCMP">CCMP</option>
<option value="SLPS">SLPS</option>
<option value="FMPS">FMPS</option>
</optgroup>
<optgroup label="TDA">
<option value="TYLA">TYLA</option>
<option value="CCMP">CCMP</option>
<option value="SLPS">SLPS</option>
<option value="FMPS">FMPS</option>
</optgroup>
<optgroup label="MTM">
<option value="ITIL">ITIL</option>
<option value="Qualite">Qualité</option>
</optgroup>
<optgroup label="MTM">
<option value="ITIL">ITIL</option>
<option value="Qualite">Qualité</option>
</optgroup>
<optgroup label="Autre">
<option value="Autre" selected>Autre</option>
</optgroup>
</select>
</article>
<optgroup label="Autre">
<option value="Autre" selected>Autre</option>
</optgroup>
</select>
</article>
<aside id="info">
<img src="left_triangle2.gif" id="arrow2" alt=""/>
<h3>La question</h3>
<p>
La question sera afficher sur 1 ligne. Donc pas la peine de
faire de retour à la ligne.
<p>
</aside>
<article>
<p id="questionPart">
<label id="q" for="question">
Quelle est votre question ? </label><br/>
<textarea id="question" name="question"
rows="10" cols="50"
placeholder="Entrez votre question ici"></textarea>
</p>
<p id="answerList">
<label for="answer">Quelle est la réponse ? </label><br/>
<input id="answer" name="answer0" type="text" />
</p>
<article>
<p id="questionPart">
<label id="q" for="question">
Quelle est votre question ? </label><br/>
<textarea id="question" name="question"
rows="3" cols="70"
placeholder="Entrez votre question ici"></textarea>
</p>
<p id="answerList">
<label for="answer">Quelle est la réponse ? </label><br/>
<input id="answer" name="answer0" type="text" />
</p>
<p>
<input type="button" value="Ajouter une réponse supplémentaire"
onclick="add()"/>
</p>
<p>
<label for="email">Merci d indiquer votre email</label><br/>
<input id="email" name="email" type="text" />
</p>
<p>
<input type="submit" name="send" value="Envoyer" />
</p>
</article>
</section>
</form>
<p>
<input type="button" value="Ajouter une réponse supplémentaire"
onclick="add()"/>
</p>
<p>
<label for="email">Merci d'indiquer votre email</label><br/>
<input id="email" name="email" type="text" />
</p>
<p>
<input type="submit" name="send" value="Envoyer" />
</p>
</article>
</section>
</form>
</section>
<footer>
<h4>Details</h4>
Ça fait moche un site sans pied de page.<br/>
En voilà donc un.
<h3>Liens utiles</h3>
<ul>
<li><a href="http://mastercorp.epita.eu" target="_blank">
Le site Mastercorp</a></li>
</ul>
</footer>
</body>

View File

@ -1,17 +1,18 @@
body
{
text-align: center;
width: 60%;
width: 75%;
margin: auto;
background-color: #545455;
background-color: #CCCCCC;
}
header
{
border-radius: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin: 10px;
padding: 8px;
background-color: black;
background-color: #333333;
color: orange;
}
@ -21,50 +22,38 @@ header
float: right;
}
#introduction
#introduction, #hello
{
text-align: justify;
border-radius: 5px;
margin-bottom: 10px;
}
#introduction article
#introduction article, #hello
{
display: block;
width: 42%;
background-color: white;
border: solid;
box-shadow: 0px 5px 5px black;
border-radius: 3px;
border-radius: 0px;
padding: 10px;
margin: 10px;
}
article h2, form h2
article h2, #hello h2
{
background-color: black;
background-color: #333333;
color: orange;
margin-left: -10px;
margin-right: -10px;
}
#bonjour
{
float: left;
margin-left: 2%;
vertical-align: top;
}
#fonctionnement
{
float: right;
margin-right: 2%;
margin-bottom: 10px;
}
form
#hello
{
border: solid;
border-radius: 5px;
clear: both;
margin-top: 10px;
margin-bottom: 20px;
@ -88,10 +77,11 @@ aside
{
float: right;
width: 30%;
border-radius: 10px;
box-shadow: 0px 5px 10px black;
padding-left: 10px;
padding-right: 10px;
background-color: black;
background-color: #222222;
color: orange;
}
@ -102,8 +92,22 @@ aside
margin-top: 80px;
}
#arrow2
{
position: absolute;
margin-left: -40px;
margin-top: 45px;
}
footer
{
border-top: solid;
text-align: justify;
padding-bottom: 50px;
}
footer a
{
color: black;
}