yoannchb-pro
341 lines
8.9 KiB
HTML
341 lines
8.9 KiB
HTML
<!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 more complicated -->
|
|
<section class="formulation">
|
|
<div class="qtext">
|
|
<p>Which are the roles of an informatician ?</p>
|
|
</div>
|
|
<div>
|
|
<div class="inp">
|
|
<input type="checkbox" />
|
|
<label
|
|
>a. Systems Administrator: Managing and maintaining computer systems and
|
|
networks.</label
|
|
>
|
|
</div>
|
|
<div class="inp">
|
|
<input type="checkbox" />
|
|
<label
|
|
>b. Software Developer: Designing, coding, testing, and maintaining software
|
|
applications.</label
|
|
>
|
|
</div>
|
|
<div class="inp">
|
|
<input type="checkbox" />
|
|
<label> c. Professional Chef: Creating delicious meals in a restaurant kitchen. </label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Number -->
|
|
<section class="formulation">
|
|
<div class="qtext">
|
|
<p>What is the result of 17/20</p>
|
|
</div>
|
|
<div>
|
|
<input type="number" />
|
|
</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>Cow</option>
|
|
<option>Dog</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>Cow</option>
|
|
<option>Dog</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="text"><p>I produce milk</p></td>
|
|
<td>
|
|
<select>
|
|
<option>Choose...</option>
|
|
<option>Cat</option>
|
|
<option>Cow</option>
|
|
<option>Dog</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Select Number -->
|
|
<section class="formulation">
|
|
<div class="qtext">
|
|
<p>Put in order the step to create a java program.</p>
|
|
</div>
|
|
<div>
|
|
<div class="inp">
|
|
<table>
|
|
<tr>
|
|
<td class="text">
|
|
<p>Write java code</p>
|
|
</td>
|
|
<td>
|
|
<select>
|
|
<option>Choose...</option>
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text">
|
|
<p>Execute the java executable file</p>
|
|
</td>
|
|
<td>
|
|
<select>
|
|
<option>Choose...</option>
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="text">
|
|
<p>Compile the java code</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>1. 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>2. 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>3. 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>
|
|
|
|
<!--Table -->
|
|
<section class="formulation">
|
|
<div class="qtext">
|
|
<p>Give me the id of the personn who have a car</p>
|
|
<table class="style-table">
|
|
<thead>
|
|
<tr>
|
|
<th>id</th>
|
|
<th>name</th>
|
|
<th>birthDate</th>
|
|
<th>cars</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Person 1</td>
|
|
<td>Yvick</td>
|
|
<td>15/08/1999</td>
|
|
<td>yes</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Person 2</td>
|
|
<td>Yann</td>
|
|
<td>19/01/2000</td>
|
|
<td>no</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<textarea></textarea>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contenteditable -->
|
|
<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>
|
|
|
|
<!-- Images -->
|
|
<section class="formulation">
|
|
<p class="accesshide" style="color: red">
|
|
Warning ! Only work with gpt-4 and if "includes images" is activate
|
|
</p>
|
|
<div class="qtext">
|
|
<p>What is the race of those cats:</p>
|
|
<img
|
|
alt="black cat"
|
|
src="https://images.ctfassets.net/cnu0m8re1exe/qDQgxOUG5DNKlKH5TXsbo/813fa629fe33794c7ff439070fc31b89/shutterstock_603117302.jpg"
|
|
/>
|
|
<img
|
|
alt="white cat"
|
|
src="https://media.istockphoto.com/id/514515260/photo/neva-masquerade-looking-at-the-camera-isolated-on-white.jpg?s=612x612&w=0&k=20&c=HCoV7nQfnLWgRI26Nlv7Kobfucw6E6NeONx1dMVusMs="
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div contenteditable="true" class="editable"></div>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|