This commit is contained in:
yoannchb-pro
2023-03-20 21:17:29 -04:00
committed by GitHub
parent 1a3bb2c0ad
commit f1f271c66e
26 changed files with 895 additions and 0 deletions
+67
View File
@@ -0,0 +1,67 @@
@font-face {
font-family: Segeo UI;
src: url(../../extension/fonts/Segoe\ UI.ttf);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Segeo UI";
}
body {
display: flex;
align-items: center;
flex-direction: column;
padding: 1rem;
gap: 1rem;
}
h1 {
text-align: center;
}
.formulation {
width: 60%;
background-color: #e7f3f5;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.inp {
margin-top: 0.5rem;
display: flex;
gap: 0.5rem;
align-items: center;
position: relative;
}
select {
position: absolute;
right: 0;
}
.editable {
background-color: #fff;
height: 10rem;
width: 100%;
resize: vertical;
overflow-y: auto;
white-space: pre-wrap;
padding: 0.5rem;
outline: none;
border: thin solid #000;
}
textarea {
outline: none;
padding: 0.5rem;
height: 10rem;
width: 100%;
resize: vertical;
white-space: pre-wrap;
overflow-y: auto;
}
+246
View File
@@ -0,0 +1,246 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Moodle test</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- checkbox -->
<section class="formulation">
<div class="qtext">
<p>Which words are animals ?</p>
</div>
<div>
<div class="inp">
<input type="checkbox" />
<label>a. Cat</label>
</div>
<div class="inp">
<input type="checkbox" />
<label>b. Dog</label>
</div>
<div class="inp">
<input type="checkbox" />
<label>c. Computer</label>
</div>
</div>
</section>
<!-- Radio -->
<section class="formulation">
<div class="qtext">
<p>What is the french president name ?</p>
</div>
<div>
<div class="inp">
<input type="radio" />
<label>Emmanuel Macron</label>
</div>
<div class="inp">
<input type="radio" />
<label>Jean Macron</label>
</div>
<div class="inp">
<input type="radio" />
<label>Yves Macron</label>
</div>
</div>
</section>
<!-- True or false -->
<section class="formulation">
<div class="qtext">
<p>The cat sometimes drink milk?</p>
</div>
<div>
<div class="inp">
<input type="radio" />
<label>True</label>
</div>
<div class="inp">
<input type="radio" />
<label>False</label>
</div>
</div>
</section>
<!-- Select -->
<section class="formulation">
<div class="qtext">
<p>Choose the correct answer</p>
</div>
<div>
<div class="inp">
<table>
<tr>
<td class="text">
<p>I am a feline</p>
</td>
<td>
<select>
<option>Choose...</option>
<option>Cat</option>
<option>Dog</option>
<option>Cow</option>
</select>
</td>
</tr>
<tr>
<td class="text">
<p>I am a descendant of the wolf</p>
</td>
<td>
<select>
<option>Choose...</option>
<option>Cat</option>
<option>Dog</option>
<option>Cow</option>
</select>
</td>
</tr>
<tr>
<td class="text"><p>I produce milk</p></td>
<td>
<select>
<option>Choose...</option>
<option>Cat</option>
<option>Dog</option>
<option>Cow</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</section>
<!-- Select Number -->
<section class="formulation">
<div class="qtext">
<p>Put the following tags in the order of creation of a html file:</p>
</div>
<div>
<div class="inp">
<table>
<tr>
<td class="text">
<p>html</p>
</td>
<td>
<select>
<option>Choose...</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td class="text">
<p>body</p>
</td>
<td>
<select>
<option>Choose...</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td class="text"><p>head</p></td>
<td>
<select>
<option>Choose...</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</section>
<!-- Select Calc -->
<section class="formulation">
<div class="qtext">
<p>Solve those equations:</p>
</div>
<div>
<div class="inp">
<table>
<tr>
<td class="text">
<p>5*5</p>
</td>
<td>
<select>
<option>Choose...</option>
<option>10</option>
<option>20</option>
<option>25</option>
</select>
</td>
</tr>
<tr>
<td class="text">
<p>20 - 10</p>
</td>
<td>
<select>
<option>Choose...</option>
<option>10</option>
<option>20</option>
<option>25</option>
</select>
</td>
</tr>
<tr>
<td class="text"><p>10+10</p></td>
<td>
<select>
<option>Choose...</option>
<option>10</option>
<option>20</option>
<option>25</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</section>
<!-- Text -->
<section class="formulation">
<div class="qtext">
<p>Give me five diferences between a dog and a cat</p>
</div>
<div>
<textarea></textarea>
</div>
</section>
<!-- Clipboard -->
<section class="formulation">
<div class="qtext">
<p>
Gives a "reverseWorld" function in javascript which takes as a
parameter a word and flips it in the opposite direction
</p>
</div>
<div>
<div contenteditable="true" class="editable"></div>
</div>
</section>
</body>
</html>