Changed style
This commit is contained in:
Bertrand Cournaud
parent
b403eff562
commit
55a9e556ba
208
index.html
208
index.html
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf8" />
|
<meta charset="utf8" />
|
||||||
<link rel="Stylesheet" href="style.css" />
|
<link rel="Stylesheet" href="style.css" />
|
||||||
<title>Every Questions (BETA)</title>
|
<title>Every AskWeb (BETA)</title>
|
||||||
|
|
||||||
<script language="javascript">
|
<script language="javascript">
|
||||||
var nbAnswer = 1;
|
var nbAnswer = 1;
|
||||||
|
|
@ -13,9 +13,10 @@
|
||||||
var element = document.createElement("input");
|
var element = document.createElement("input");
|
||||||
|
|
||||||
element.setAttribute("type", "text");
|
element.setAttribute("type", "text");
|
||||||
|
element.setAttribute("id", "answer");
|
||||||
element.setAttribute("name", "answer" + nbAnswer);
|
element.setAttribute("name", "answer" + nbAnswer);
|
||||||
nbAnswer++;
|
nbAnswer++;
|
||||||
element.setAttribute("placeholder", "Enter the new answer");
|
element.setAttribute("placeholder", "Nouvelle réponse");
|
||||||
|
|
||||||
var foo = document.getElementById("answerList");
|
var foo = document.getElementById("answerList");
|
||||||
foo.appendChild(element);
|
foo.appendChild(element);
|
||||||
|
|
@ -30,133 +31,152 @@
|
||||||
<a href="http://www.h2g2.com" target="_blank">
|
<a href="http://www.h2g2.com" target="_blank">
|
||||||
<img src="marvin-robot_normal.png" alt="" id="banner"/>
|
<img src="marvin-robot_normal.png" alt="" id="banner"/>
|
||||||
</a>
|
</a>
|
||||||
<h1>Nemubot Questions (BETA)</h1>
|
<h1>Nemubot AskWeb (BETA)</h1>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section id="introduction">
|
<section id="introduction">
|
||||||
<article id="bonjour">
|
<article id="bonjour">
|
||||||
<h2>Bonjour,</h2>
|
<h2>Bonjour</h2>
|
||||||
|
|
||||||
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.
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article id="fonctionnement">
|
<article id="explications">
|
||||||
<h2>Fonctionnement</h2>
|
<h2>Nemubot AskWeb en 3 étapes</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Les questions que vous ajoutez vont être soumise à vérification par une
|
<h3>Nouvelle question</h3>
|
||||||
personne tirée au sort parmis la liste des participants du chan.
|
Commencez par entrer votre question ainsi que la ou les réponses
|
||||||
</p>
|
associées. À noter que :
|
||||||
<p>
|
<ul>
|
||||||
L'un des principes de ces questions est qu'elle aient un rapport
|
<li>Il est conseillé d'indiquer plusieurs fois vos réponses
|
||||||
avec les cours dispensés au 2eme semestres et sur lesquelles nous
|
avec des variations telles que : "une chaussure"
|
||||||
auront des partiels. Merci de poser des questions qui vont dans
|
et "chaussure"</li>
|
||||||
ce sens.
|
<li>Les questions possédant seulement 2 réponses possibles
|
||||||
|
n'ont pas beaucoup d'intêret</li>
|
||||||
|
</ul>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Un email va être envoyé à cette personne avec votre question et
|
<h3>Confirmer votre question</h3>
|
||||||
la/les réponse(s) que vous avez proposé. Cette personne pourra alors
|
Une fois la question ajoutée, un email vous a été envoyé pour que
|
||||||
valider votre question et celle ci pourra alors apparaitre sur le chan.
|
vous confirmiez qu'il s'agit bien de vous. Cliquez sur le lien
|
||||||
Si elle est refusée, elle sera détruite de la base de données.
|
pour confirmer.
|
||||||
</p>
|
</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>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<form id="formulaire" method="post" action="questions.php">
|
<section id="hello">
|
||||||
<h2>Nouvelle question</h2>
|
<h2>Nouvelle question</h2>
|
||||||
|
<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=""/>
|
||||||
<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
|
||||||
d'aller vérifier par lui même la véracité de votre réponse.<br/>
|
d'aller vérifier par lui même la véracité de votre réponse.
|
||||||
Indiquez la matière sur laquelle porte la question lui permettra
|
</p>
|
||||||
d'aller plus vite.<br/>
|
</aside>
|
||||||
|
|
||||||
</p>
|
<article id="list">
|
||||||
</aside>
|
<label for="course">De quelle matière s'agit-il ?</label><br/>
|
||||||
|
|
||||||
<article id="list">
|
<select name="course" id="course">
|
||||||
<label for="course">De quelle matière s'agit-il ?</label><br/>
|
|
||||||
|
|
||||||
<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">
|
<optgroup label="Electif">
|
||||||
<option value="SGBD">SGBD</option>
|
<option value="RXAN">RXAN</option>
|
||||||
<option value="CompressionDeDonnées">
|
</optgroup>
|
||||||
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">
|
<optgroup label="TDA">
|
||||||
<option value="RXAN">RXAN</option>
|
<option value="TYLA">TYLA</option>
|
||||||
</optgroup>
|
<option value="CCMP">CCMP</option>
|
||||||
|
<option value="SLPS">SLPS</option>
|
||||||
|
<option value="FMPS">FMPS</option>
|
||||||
|
</optgroup>
|
||||||
|
|
||||||
<optgroup label="TDA">
|
<optgroup label="MTM">
|
||||||
<option value="TYLA">TYLA</option>
|
<option value="ITIL">ITIL</option>
|
||||||
<option value="CCMP">CCMP</option>
|
<option value="Qualite">Qualité</option>
|
||||||
<option value="SLPS">SLPS</option>
|
</optgroup>
|
||||||
<option value="FMPS">FMPS</option>
|
|
||||||
</optgroup>
|
|
||||||
|
|
||||||
<optgroup label="MTM">
|
<optgroup label="Autre">
|
||||||
<option value="ITIL">ITIL</option>
|
<option value="Autre" selected>Autre</option>
|
||||||
<option value="Qualite">Qualité</option>
|
</optgroup>
|
||||||
</optgroup>
|
</select>
|
||||||
|
</article>
|
||||||
|
|
||||||
<optgroup label="Autre">
|
<aside id="info">
|
||||||
<option value="Autre" selected>Autre</option>
|
<img src="left_triangle2.gif" id="arrow2" alt=""/>
|
||||||
</optgroup>
|
<h3>La question</h3>
|
||||||
</select>
|
<p>
|
||||||
</article>
|
La question sera afficher sur 1 ligne. Donc pas la peine de
|
||||||
|
faire de retour à la ligne.
|
||||||
|
<p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<p id="questionPart">
|
<p id="questionPart">
|
||||||
<label id="q" for="question">
|
<label id="q" for="question">
|
||||||
Quelle est votre question ? </label><br/>
|
Quelle est votre question ? </label><br/>
|
||||||
<textarea id="question" name="question"
|
<textarea id="question" name="question"
|
||||||
rows="10" cols="50"
|
rows="3" cols="70"
|
||||||
placeholder="Entrez votre question ici"></textarea>
|
placeholder="Entrez votre question ici"></textarea>
|
||||||
</p>
|
</p>
|
||||||
<p id="answerList">
|
<p id="answerList">
|
||||||
<label for="answer">Quelle est la réponse ? </label><br/>
|
<label for="answer">Quelle est la réponse ? </label><br/>
|
||||||
<input id="answer" name="answer0" type="text" />
|
<input id="answer" name="answer0" type="text" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<input type="button" value="Ajouter une réponse supplémentaire"
|
<input type="button" value="Ajouter une réponse supplémentaire"
|
||||||
onclick="add()"/>
|
onclick="add()"/>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="email">Merci d indiquer votre email</label><br/>
|
<label for="email">Merci d'indiquer votre email</label><br/>
|
||||||
<input id="email" name="email" type="text" />
|
<input id="email" name="email" type="text" />
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<input type="submit" name="send" value="Envoyer" />
|
<input type="submit" name="send" value="Envoyer" />
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
<footer>
|
<footer>
|
||||||
<h4>Details</h4>
|
<h3>Liens utiles</h3>
|
||||||
Ça fait moche un site sans pied de page.<br/>
|
<ul>
|
||||||
En voilà donc un.
|
<li><a href="http://mastercorp.epita.eu" target="_blank">
|
||||||
|
Le site Mastercorp</a></li>
|
||||||
|
</ul>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
52
style.css
52
style.css
|
|
@ -1,17 +1,18 @@
|
||||||
body
|
body
|
||||||
{
|
{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 60%;
|
width: 75%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background-color: #545455;
|
background-color: #CCCCCC;
|
||||||
}
|
}
|
||||||
|
|
||||||
header
|
header
|
||||||
{
|
{
|
||||||
border-radius: 10px;
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background-color: black;
|
background-color: #333333;
|
||||||
color: orange;
|
color: orange;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -21,50 +22,38 @@ header
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
#introduction
|
#introduction, #hello
|
||||||
{
|
{
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
border-radius: 5px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#introduction article
|
#introduction article, #hello
|
||||||
{
|
{
|
||||||
display: block;
|
|
||||||
width: 42%;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: solid;
|
box-shadow: 0px 5px 5px black;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
article h2, form h2
|
article h2, #hello h2
|
||||||
{
|
{
|
||||||
background-color: black;
|
background-color: #333333;
|
||||||
color: orange;
|
color: orange;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
margin-right: -10px;
|
margin-right: -10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bonjour
|
|
||||||
{
|
|
||||||
float: left;
|
|
||||||
margin-left: 2%;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
#fonctionnement
|
#fonctionnement
|
||||||
{
|
{
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 2%;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
form
|
#hello
|
||||||
{
|
{
|
||||||
border: solid;
|
|
||||||
border-radius: 5px;
|
|
||||||
clear: both;
|
clear: both;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
@ -88,10 +77,11 @@ aside
|
||||||
{
|
{
|
||||||
float: right;
|
float: right;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
|
border-radius: 10px;
|
||||||
box-shadow: 0px 5px 10px black;
|
box-shadow: 0px 5px 10px black;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
background-color: black;
|
background-color: #222222;
|
||||||
color: orange;
|
color: orange;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -102,8 +92,22 @@ aside
|
||||||
margin-top: 80px;
|
margin-top: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#arrow2
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
margin-left: -40px;
|
||||||
|
margin-top: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
footer
|
footer
|
||||||
{
|
{
|
||||||
border-top: solid;
|
border-top: solid;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a
|
||||||
|
{
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in New Issue
Block a user