-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
314aa36
commit 6cb697f
Showing
2 changed files
with
159 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| <div class="quiz"> | ||
| <p class="quiz__title"> | ||
| Testez vos | ||
| <span>connaissances_</span> | ||
| </p> | ||
| <div class="quiz__content"> | ||
| <!-- Checkbox before validation--> | ||
| <div class="question"> | ||
| <p>Quels sont les emojis préférés de Maxime Colin?</p> | ||
| <div class="question__content"> | ||
| <div class="checkbox"> | ||
| <input class="checkbox__input" type="checkbox" id="ipsum"> | ||
| <label class="checkbox__label" for="ipsum">Judging hermine</label> | ||
| </div> | ||
| <div class="checkbox"> | ||
| <input class="checkbox__input" type="checkbox" id="lorem"> | ||
| <label class="checkbox__label" for="lorem">Loading hermine</label> | ||
| </div> | ||
| <div class="checkbox"> | ||
| <input class="checkbox__input" type="checkbox" id="quidem"> | ||
| <label class="checkbox__label" for="quidem">Approving hermine</label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- Radio buttons before validation--> | ||
| <div class="question"> | ||
| <p>Quels sont les emojis préférés de Maxime Colin?</p> | ||
| <div class="question__content"> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone" id="dolor"> | ||
| <label class="radio__label" for="dolor">Judging hermine | ||
| </div> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone" id="cupiditate"> | ||
| <label class="radio__label" for="cupiditate">Loading hermine | ||
| </div> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone" id="adipisicing"> | ||
| <label class="radio__label" for="adipisicing">Approving hermine | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- Checkbox after validation and correct answer --> | ||
| <div class="question question--answered question--success"> | ||
| <p>Quels sont les emojis préférés de Maxime Colin?</p> | ||
| <div class="question__content"> | ||
| <div class="checkbox"> | ||
| <input class="checkbox__input" type="checkbox" id="ipsom"> | ||
| <label class="checkbox__label" for="ipsom">Judging hermine</label> | ||
| </div> | ||
| <div class="checkbox"> | ||
| <input class="checkbox__input" type="checkbox" id="lorom"> | ||
| <label class="checkbox__label" for="lorom">Loading hermine</label> | ||
| </div> | ||
| <div class="checkbox"> | ||
| <input class="checkbox__input" type="checkbox" id="quidom"> | ||
| <label class="checkbox__label" for="quidom">Approving hermine</label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- Radio buttons after validation and wrong answer --> | ||
| <div class="question question--answered question--error"> | ||
| <p>Quels sont les emojis préférés de Maxime Colin?</p> | ||
| <div class="question__content"> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone" id="mordor"> | ||
| <label class="radio__label" for="mordor">Judging hermine</label> | ||
| </div> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone" id="cupidon"> | ||
| <label class="radio__label" for="cupidon">Loading hermine</label> | ||
| </div> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone" id="discipline"> | ||
| <label class="radio__label" for="discipline">Approving hermine</label> | ||
| </div> | ||
| </div> | ||
| <!-- One solution --> | ||
| <div class="question__info"> | ||
| <span class="title">La bonne réponse est :</span> | ||
| <span>Lorem ipsum dolor sit amet.</span> | ||
| </div> | ||
| <!-- Two solutions --> | ||
| <div class="question__info"> | ||
| <span class="title">Les bonnes réponses sont :</span> | ||
| <span>Lorem ipsum dolor sit amet.</span> | ||
| <span>Lorem ipsum dolor sit amet.</span> | ||
| </div> | ||
| </div> | ||
| <!-- Radio buttons with code --> | ||
| <div class="question"> | ||
| <p>Quels sont les emojis préférés de Maxime Colin?</p> | ||
| <div class="question__content"> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone-code" id="sit"> | ||
| <label class="radio__label" for="sit"> | ||
| <code>#judging-hermine</code> | ||
| </label> | ||
| </div> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone-code" id="consectetur"> | ||
| <label class="radio__label" for="consectetur"> | ||
| <code>#loading-hermine</code> | ||
| </label> | ||
| </div> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone-code" id="nam"> | ||
| <label class="radio__label" for="nam"> | ||
| <pre><code>#approving-hermine { | ||
| }</code></pre> | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- Radio buttons with code, after validation and wrong answer --> | ||
| <div class="question question--answered question--error"> | ||
| <p>Quels sont les emojis préférés de Maxime Colin?</p> | ||
| <div class="question__content"> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone-code" id="sot"> | ||
| <label class="radio__label" for="sot"> | ||
| <code>#judging-hermine</code> | ||
| </label> | ||
| </div> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone-code" id="consectetor"> | ||
| <label class="radio__label" for="consectetor"> | ||
| <code>#loading-hermine</code> | ||
| </label> | ||
| </div> | ||
| <div class="radio"> | ||
| <input class="radio__input" type="radio" name="drone-code" id="nom"> | ||
| <label class="radio__label" for="nom"> | ||
| <pre><code>#approving-hermine { | ||
| color: blue; | ||
| padding: 10em; | ||
| }</code></pre> | ||
| </label> | ||
| </div> | ||
| </div> | ||
| <!-- Solution to code question with radio buttons --> | ||
| <div class="question__info"> | ||
| <span class="title">La bonne réponse est :</span> | ||
| <div><code>#loading-hermine</code></div> | ||
| </div> | ||
| </div> | ||
| <!-- Submit button --> | ||
| <div class="quiz__submit"> | ||
| <button class="btn">Valider les réponses_</button> | ||
| </div> | ||
| <!-- Quiz score --> | ||
| <div class="quiz__score"> | ||
| <strong class="emoji">👏</strong> | ||
| <strong class="percentage">80%</strong> | ||
| <strong>de bonnes réponses</strong> | ||
| </div> | ||
| </div> |