mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
dlquizmodal tests
This commit is contained in:
Philippe
parent
4ae5561154
commit
db21581535
2 changed files with 72 additions and 461 deletions
|
|
@ -0,0 +1,72 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||||
|
import '@testing-library/jest-dom';
|
||||||
|
import DownloadQuizModal from '../../../components/DownloadQuizModal/DownloadQuizModal';
|
||||||
|
import ApiService from '../../../services/ApiService';
|
||||||
|
import { QuizType } from '../../../Types/QuizType';
|
||||||
|
|
||||||
|
jest.mock('../../../services/ApiService');
|
||||||
|
jest.mock('jspdf', () => {
|
||||||
|
return jest.fn().mockImplementation(() => ({
|
||||||
|
addImage: jest.fn(),
|
||||||
|
save: jest.fn(),
|
||||||
|
addPage: jest.fn(),
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
jest.mock('html2canvas', () => jest.fn(() => Promise.resolve(document.createElement('canvas'))));
|
||||||
|
jest.mock('dompurify', () => ({
|
||||||
|
sanitize: jest.fn((input) => input),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockQuiz: QuizType = {
|
||||||
|
_id: '123',
|
||||||
|
title: 'Sample Quiz',
|
||||||
|
content: ['::Question 1:: What is 2+2? {=4 ~3 ~5}'],
|
||||||
|
folderId: 'folderId',
|
||||||
|
folderName: 'folderName',
|
||||||
|
userId: 'userId',
|
||||||
|
created_at: new Date(),
|
||||||
|
updated_at: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('DownloadQuizModal', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
jest.clearAllMocks();
|
||||||
|
(ApiService.getQuiz as jest.Mock).mockResolvedValue(mockQuiz);
|
||||||
|
jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders without crashing', () => {
|
||||||
|
render(<DownloadQuizModal quiz={mockQuiz} />);
|
||||||
|
expect(screen.getByRole('button', { name: /télécharger quiz/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('opens modal when download button is clicked', () => {
|
||||||
|
render(<DownloadQuizModal quiz={mockQuiz} />);
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: /télécharger quiz/i }));
|
||||||
|
expect(screen.getByText(/choisissez un format de téléchargement/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('closes modal when a format button is clicked', async () => {
|
||||||
|
render(<DownloadQuizModal quiz={mockQuiz} />);
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: /télécharger quiz/i }));
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: /gift/i }));
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.queryByText(/choisissez un format de téléchargement/i)).not.toBeInTheDocument()
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('handles error when quiz API fails', async () => {
|
||||||
|
(ApiService.getQuiz as jest.Mock).mockRejectedValue(new Error('Quiz not found'));
|
||||||
|
render(<DownloadQuizModal quiz={mockQuiz} />);
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: /télécharger quiz/i }));
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: /gift/i }));
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(console.error).toHaveBeenCalledWith(
|
||||||
|
expect.any(String),
|
||||||
|
expect.objectContaining({ message: expect.stringContaining("Quiz not found") })
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -1,461 +0,0 @@
|
||||||
<section style="flex-wrap: wrap;
|
|
||||||
position: relative;
|
|
||||||
padding: 1rem 1rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: solid hsl(0, 0%, 100%) 2px;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);">
|
|
||||||
<div style="display: flex;
|
|
||||||
font-weight: bold;">
|
|
||||||
<span>
|
|
||||||
<span style="color: #5271FF;"><em>(Sans titre)</em></span>
|
|
||||||
</span>
|
|
||||||
<span style="margin-left: auto;
|
|
||||||
padding-left: 0.75rem;
|
|
||||||
flex: none;
|
|
||||||
margin-bottom: 10px;">
|
|
||||||
<span style="box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
|
|
||||||
padding-left: 0.7rem;
|
|
||||||
padding-right: 0.7rem;
|
|
||||||
padding-top: 0.4rem;
|
|
||||||
padding-bottom: 0.4rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
color: hsl(180, 15%, 41%);">Choix multiple</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex;">
|
|
||||||
<span>
|
|
||||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
|
||||||
Quelle ville est la capitale du Canada?
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span style="color: hsl(0, 0%, 0%);">Choisir une réponse:</span>
|
|
||||||
<div class="multiple-choice-answers-container">
|
|
||||||
<input name="idCO6FDyZe" id="idMhfh1m" type="radio" class="gift-input">
|
|
||||||
|
|
||||||
<label for="idMhfh1m" style="display: inline-block;
|
|
||||||
padding: 0.2em 0 0.2em 0;
|
|
||||||
|
|
||||||
color: hsl(0, 0%, 0%);">
|
|
||||||
Toronto
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="multiple-choice-answers-container">
|
|
||||||
<input name="idCO6FDyZe" id="idE3YQnW" type="radio" class="gift-input">
|
|
||||||
|
|
||||||
<label for="idE3YQnW" style="display: inline-block;
|
|
||||||
padding: 0.2em 0 0.2em 0;
|
|
||||||
|
|
||||||
color: hsl(0, 0%, 0%);">
|
|
||||||
Montréal
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="multiple-choice-answers-container">
|
|
||||||
<input name="idCO6FDyZe" id="id9UoyK7" type="radio" class="gift-input">
|
|
||||||
|
|
||||||
<label for="id9UoyK7" style="display: inline-block;
|
|
||||||
padding: 0.2em 0 0.2em 0;
|
|
||||||
|
|
||||||
color: hsl(0, 0%, 0%);">
|
|
||||||
Ottawa
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
</div></section><section style="flex-wrap: wrap;
|
|
||||||
position: relative;
|
|
||||||
padding: 1rem 1rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: solid hsl(0, 0%, 100%) 2px;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);">
|
|
||||||
<div style="display: flex;
|
|
||||||
font-weight: bold;">
|
|
||||||
<span>
|
|
||||||
<span style="color: #5271FF;"><em>(Sans titre)</em></span>
|
|
||||||
</span>
|
|
||||||
<span style="margin-left: auto;
|
|
||||||
padding-left: 0.75rem;
|
|
||||||
flex: none;
|
|
||||||
margin-bottom: 10px;">
|
|
||||||
<span style="box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
|
|
||||||
padding-left: 0.7rem;
|
|
||||||
padding-right: 0.7rem;
|
|
||||||
padding-top: 0.4rem;
|
|
||||||
padding-bottom: 0.4rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
color: hsl(180, 15%, 41%);">Réponse courte</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex;">
|
|
||||||
<span>
|
|
||||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
|
||||||
Avec quoi ouvre-t-on une porte?
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<span style="color: hsl(0, 0%, 0%);">Réponse: </span><input placeholder="" style="display: inline-block;
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: hsl(0, 0%, 16%);
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: 1px solid hsl(0, 0%, 81%);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
width: 90%;" type="text" class="gift-input">
|
|
||||||
</div>
|
|
||||||
</section><section style="flex-wrap: wrap;
|
|
||||||
position: relative;
|
|
||||||
padding: 1rem 1rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: solid hsl(0, 0%, 100%) 2px;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);">
|
|
||||||
<div style="display: flex;
|
|
||||||
font-weight: bold;">
|
|
||||||
<span>
|
|
||||||
<span style="color: #5271FF;"><em>(Sans titre)</em></span>
|
|
||||||
</span>
|
|
||||||
<span style="margin-left: auto;
|
|
||||||
padding-left: 0.75rem;
|
|
||||||
flex: none;
|
|
||||||
margin-bottom: 10px;">
|
|
||||||
<span style="box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
|
|
||||||
padding-left: 0.7rem;
|
|
||||||
padding-right: 0.7rem;
|
|
||||||
padding-top: 0.4rem;
|
|
||||||
padding-bottom: 0.4rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
color: hsl(180, 15%, 41%);">Numérique</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex;">
|
|
||||||
<span>
|
|
||||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
|
||||||
Quel est un nombre de 1 à 5 ?
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div><p style="color: hsl(0, 0%, 0%);">Réponse: </p><input placeholder="" style="display: inline-block;
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: hsl(0, 0%, 16%);
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: 1px solid hsl(0, 0%, 81%);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
width: 90%;
|
|
||||||
;width: 100%" type="text" class="gift-input"></div></section><section style="flex-wrap: wrap;
|
|
||||||
position: relative;
|
|
||||||
padding: 1rem 1rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: solid hsl(0, 0%, 100%) 2px;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);">
|
|
||||||
<div style="display: flex;
|
|
||||||
font-weight: bold;">
|
|
||||||
<span>
|
|
||||||
<span style="color: #5271FF;"><em>(Sans titre)</em></span>
|
|
||||||
</span>
|
|
||||||
<span style="margin-left: auto;
|
|
||||||
padding-left: 0.75rem;
|
|
||||||
flex: none;
|
|
||||||
margin-bottom: 10px;">
|
|
||||||
<span style="box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
|
|
||||||
padding-left: 0.7rem;
|
|
||||||
padding-right: 0.7rem;
|
|
||||||
padding-top: 0.4rem;
|
|
||||||
padding-bottom: 0.4rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
color: hsl(180, 15%, 41%);">Numérique</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex;">
|
|
||||||
<span>
|
|
||||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
|
||||||
Quel est un nombre de 1 à 5 ?
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div><p style="color: hsl(0, 0%, 0%);">Réponse: </p><input placeholder="" style="display: inline-block;
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: hsl(0, 0%, 16%);
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: 1px solid hsl(0, 0%, 81%);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
width: 90%;
|
|
||||||
;width: 100%" type="text" class="gift-input"></div></section><section style="flex-wrap: wrap;
|
|
||||||
position: relative;
|
|
||||||
padding: 1rem 1rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: solid hsl(0, 0%, 100%) 2px;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);">
|
|
||||||
<div style="display: flex;
|
|
||||||
font-weight: bold;">
|
|
||||||
<span>
|
|
||||||
<span style="color: #5271FF;"><em>(Sans titre)</em></span>
|
|
||||||
</span>
|
|
||||||
<span style="margin-left: auto;
|
|
||||||
padding-left: 0.75rem;
|
|
||||||
flex: none;
|
|
||||||
margin-bottom: 10px;">
|
|
||||||
<span style="box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
|
|
||||||
padding-left: 0.7rem;
|
|
||||||
padding-right: 0.7rem;
|
|
||||||
padding-top: 0.4rem;
|
|
||||||
padding-bottom: 0.4rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
color: hsl(180, 15%, 41%);">Numérique</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex;">
|
|
||||||
<span>
|
|
||||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
|
||||||
Quand est né Ulysses S. Grant ?
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div><p style="color: hsl(0, 0%, 0%);">Réponse: </p><input placeholder="" style="display: inline-block;
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: hsl(0, 0%, 16%);
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: 1px solid hsl(0, 0%, 81%);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
width: 90%;
|
|
||||||
;width: 100%" type="text" class="gift-input"><p style="color: hsl(0, 0%, 0%);">Réponse: </p><input placeholder="" style="display: inline-block;
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: hsl(0, 0%, 16%);
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: 1px solid hsl(0, 0%, 81%);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
width: 90%;
|
|
||||||
;width: 100%" type="text" class="gift-input"></div></section><section style="flex-wrap: wrap;
|
|
||||||
position: relative;
|
|
||||||
padding: 1rem 1rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: solid hsl(0, 0%, 100%) 2px;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);">
|
|
||||||
<div style="display: flex;
|
|
||||||
font-weight: bold;">
|
|
||||||
<span>
|
|
||||||
<span style="color: #5271FF;"><em>(Sans titre)</em></span>
|
|
||||||
</span>
|
|
||||||
<span style="margin-left: auto;
|
|
||||||
padding-left: 0.75rem;
|
|
||||||
flex: none;
|
|
||||||
margin-bottom: 10px;">
|
|
||||||
<span style="box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
|
|
||||||
padding-left: 0.7rem;
|
|
||||||
padding-right: 0.7rem;
|
|
||||||
padding-top: 0.4rem;
|
|
||||||
padding-bottom: 0.4rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
color: hsl(180, 15%, 41%);">Vrai/Faux</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex;">
|
|
||||||
<span>
|
|
||||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
|
||||||
2+2 = 4 ?
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span style="color: hsl(0, 0%, 0%);">Choisir une réponse:</span>
|
|
||||||
<div class="multiple-choice-answers-container">
|
|
||||||
<input name="idOrgRFcP7" id="id0Y3L_s" type="radio" class="gift-input">
|
|
||||||
|
|
||||||
<label for="id0Y3L_s" style="display: inline-block;
|
|
||||||
padding: 0.2em 0 0.2em 0;
|
|
||||||
|
|
||||||
color: hsl(0, 0%, 0%);">
|
|
||||||
Vrai
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="multiple-choice-answers-container">
|
|
||||||
<input name="idOrgRFcP7" id="idYvbRmI" type="radio" class="gift-input">
|
|
||||||
|
|
||||||
<label for="idYvbRmI" style="display: inline-block;
|
|
||||||
padding: 0.2em 0 0.2em 0;
|
|
||||||
|
|
||||||
color: hsl(0, 0%, 0%);">
|
|
||||||
Faux
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section><section style="flex-wrap: wrap;
|
|
||||||
position: relative;
|
|
||||||
padding: 1rem 1rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: solid hsl(0, 0%, 100%) 2px;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);">
|
|
||||||
<div style="display: flex;
|
|
||||||
font-weight: bold;">
|
|
||||||
<span>
|
|
||||||
<span style="color: #5271FF;"><em>(Sans titre)</em></span>
|
|
||||||
</span>
|
|
||||||
<span style="margin-left: auto;
|
|
||||||
padding-left: 0.75rem;
|
|
||||||
flex: none;
|
|
||||||
margin-bottom: 10px;">
|
|
||||||
<span style="box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
|
|
||||||
padding-left: 0.7rem;
|
|
||||||
padding-right: 0.7rem;
|
|
||||||
padding-top: 0.4rem;
|
|
||||||
padding-bottom: 0.4rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
color: hsl(180, 15%, 41%);">Choix multiple</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex;">
|
|
||||||
<span>
|
|
||||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
|
||||||
Quelles villes trouve-t-on au Canada?
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span style="color: hsl(0, 0%, 0%);">Choisir une réponse ou plusieurs:</span>
|
|
||||||
<div class="multiple-choice-answers-container">
|
|
||||||
<input name="idIWtFb7BZ" id="idgi6jMo" type="checkbox" class="gift-input">
|
|
||||||
|
|
||||||
<label for="idgi6jMo" style="display: inline-block;
|
|
||||||
padding: 0.2em 0 0.2em 0;
|
|
||||||
|
|
||||||
color: hsl(0, 0%, 0%);">
|
|
||||||
Montréal
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="multiple-choice-answers-container">
|
|
||||||
<input name="idIWtFb7BZ" id="idmHcWKn" type="checkbox" class="gift-input">
|
|
||||||
|
|
||||||
<label for="idmHcWKn" style="display: inline-block;
|
|
||||||
padding: 0.2em 0 0.2em 0;
|
|
||||||
|
|
||||||
color: hsl(0, 0%, 0%);">
|
|
||||||
Ottawa
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="multiple-choice-answers-container">
|
|
||||||
<input name="idIWtFb7BZ" id="idSmdZmZ" type="checkbox" class="gift-input">
|
|
||||||
|
|
||||||
<label for="idSmdZmZ" style="display: inline-block;
|
|
||||||
padding: 0.2em 0 0.2em 0;
|
|
||||||
|
|
||||||
color: hsl(0, 0%, 0%);">
|
|
||||||
Vancouver
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="multiple-choice-answers-container">
|
|
||||||
<input name="idIWtFb7BZ" id="idOwpWf3" type="checkbox" class="gift-input">
|
|
||||||
|
|
||||||
<label for="idOwpWf3" style="display: inline-block;
|
|
||||||
padding: 0.2em 0 0.2em 0;
|
|
||||||
|
|
||||||
color: hsl(0, 0%, 0%);">
|
|
||||||
New York
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="multiple-choice-answers-container">
|
|
||||||
<input name="idIWtFb7BZ" id="idT8VlUn" type="checkbox" class="gift-input">
|
|
||||||
|
|
||||||
<label for="idT8VlUn" style="display: inline-block;
|
|
||||||
padding: 0.2em 0 0.2em 0;
|
|
||||||
|
|
||||||
color: hsl(0, 0%, 0%);">
|
|
||||||
Paris
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div style="position: relative;
|
|
||||||
margin-top: 1rem;
|
|
||||||
padding: 0 1rem;
|
|
||||||
background-color: hsl(43, 100%, 94%);
|
|
||||||
color: hsl(43, 95%, 9%);
|
|
||||||
border: hsl(36, 84%, 93%) 1px solid;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0px 2px 5px hsl(0, 0%, 74%);">
|
|
||||||
|
|
||||||
</div></section>
|
|
||||||
Loading…
Reference in a new issue