v1.0.3
This commit is contained in:
@@ -1,67 +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;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
@@ -1,261 +1,261 @@
|
||||
<!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>
|
||||
|
||||
<!-- 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>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 three steps needed in a general sense for a computer program
|
||||
to solve the problem in the correct order
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="inp">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="text">
|
||||
<p>Understand the problem</p>
|
||||
</td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Choose...</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text">
|
||||
<p>Carry out the plan and write the actual 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>Create a step-by-step plan for how you'll solve it</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>
|
||||
|
||||
<!-- 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>
|
||||
<!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>
|
||||
|
||||
<!-- 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>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 three steps needed in a general sense for a computer program
|
||||
to solve the problem in the correct order
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="inp">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="text">
|
||||
<p>Understand the problem</p>
|
||||
</td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Choose...</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text">
|
||||
<p>Carry out the plan and write the actual 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>Create a step-by-step plan for how you'll solve it</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>
|
||||
|
||||
<!-- 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>
|
||||
@@ -0,0 +1,21 @@
|
||||
/* Reset real moodle inputs to try in real env */
|
||||
for (const option of document.querySelectorAll("option")) {
|
||||
option.selected = false;
|
||||
option.disabled = false;
|
||||
option.closest("select").disabled = false;
|
||||
}
|
||||
|
||||
for (const input of document.querySelectorAll(
|
||||
'input[type="radio"], input[type="checkbox"]'
|
||||
)) {
|
||||
input.checked = false;
|
||||
input.disabled = false;
|
||||
}
|
||||
|
||||
for (const icon of document.querySelectorAll(".text-danger, .text-success")) {
|
||||
icon.remove();
|
||||
}
|
||||
|
||||
for (const feedback of document.querySelectorAll(".specificfeedback")) {
|
||||
feedback.remove();
|
||||
}
|
||||
Reference in New Issue
Block a user