CLASSROOMIO-T-193: Exercise Templates for HTML
CLASSROOMIO-T-193: Convert to single quotes CLASSROOMIO-T-193: Resolved Feedbacks landing page improvement add spacing on mobile for notes in lms little bug fixes in lms CLASSROOMIO-T-193: return the array Simplify template generation CLASSROOMIO-T-193: Styling improvement CLASSROOMIO-T-193: Exercise Templates for HTML Co-authored-by: Rotimi Best <[email protected]> Co-authored-by: Tunji Adeyemi <[email protected]> Merge-request: CLASSROOMIO-MR-88 Merged-by: Best Admin <[email protected]>
This commit is contained in:
tunny17
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
Rotimi Best
parent
e57bd4a4bf
commit
849154711b
@@ -10,6 +10,8 @@
|
||||
handleAnswerSelect,
|
||||
addDynamicValue
|
||||
} from '../store/exercise';
|
||||
import { Select, SelectItem } from 'carbon-components-svelte';
|
||||
|
||||
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
|
||||
import AddFilledIcon from 'carbon-icons-svelte/lib/AddFilled.svelte';
|
||||
import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
|
||||
@@ -24,7 +26,6 @@
|
||||
import ErrorMessage from '$lib/components/ErrorMessage/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import Select from '$lib/components/Form/Select.svelte';
|
||||
import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
|
||||
import DeleteConfirmationModal from './DeleteConfirmation.svelte';
|
||||
import OrderModal from './OrderModal.svelte';
|
||||
@@ -156,7 +157,7 @@
|
||||
}}
|
||||
>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mr-2 w-3/5">
|
||||
<div class="mr-5 w-3/5">
|
||||
<TextField
|
||||
placeholder="Question"
|
||||
bind:value={question.title}
|
||||
@@ -168,12 +169,19 @@
|
||||
</div>
|
||||
|
||||
<Select
|
||||
bind:value={question.question_type}
|
||||
options={QUESTION_TYPES}
|
||||
onChange={() => {
|
||||
size="xl"
|
||||
class="w-[50px]"
|
||||
bind:selected={question.question_type.id}
|
||||
on:change={(e) => {
|
||||
const id = parseInt(e.target.value);
|
||||
question.question_type = QUESTION_TYPES.find((q) => q.id === id);
|
||||
question.is_dirty = true;
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{#each QUESTION_TYPES as type}
|
||||
<SelectItem value={type.id} text={type.label} />
|
||||
{/each}
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{#if typeof question.code === 'string'}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
|
||||
import EditContent from '$lib/components/EditContent/index.svelte';
|
||||
import DateTime from '$lib/components/Form/DateTime.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import { questionnaire } from '../store/exercise';
|
||||
import { marked } from 'marked';
|
||||
export let preview;
|
||||
|
||||
export let preview: boolean;
|
||||
|
||||
function getTotalPossibleGrade(questions) {
|
||||
return questions.reduce((acc, question) => {
|
||||
@@ -15,7 +16,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mb-5 px-6">
|
||||
<div class="mb-5 {!preview ? 'px-6' : 'px-2'}">
|
||||
<QuestionContainer isTitle={true}>
|
||||
{#if !preview}
|
||||
<TextField
|
||||
|
||||
@@ -132,7 +132,8 @@
|
||||
<div class="mb-5 flex items-center gap-2">
|
||||
{#each tags as tag}
|
||||
<Tag
|
||||
type={selectedTag === tag ? 'cool-gray' : 'outline'}
|
||||
type={selectedTag === tag ? 'warm-gray' : 'outline'}
|
||||
class={selectedTag === tag ? 'bg-primary-400' : ''}
|
||||
interactive
|
||||
on:click={() => {
|
||||
selectedTag = tag;
|
||||
|
||||
@@ -182,8 +182,13 @@
|
||||
<img src="/images/empty-exercise-icon.svg" alt="Exercise" class="my-2.5 mx-auto" />
|
||||
<h2 class="text-xl my-1.5 font-normal">No exercises added for this lesson</h2>
|
||||
<p class="text-sm text-center text-slate-500">
|
||||
Share your knowledge with the world by creating engaging exercises. Add an exercise
|
||||
now.
|
||||
{#if isStudent}
|
||||
Your tutor hasn't assigned any exercise to this lesson. For the main time, you can
|
||||
<strong>chill with the big boys :)</strong>
|
||||
{:else}
|
||||
Share your knowledge with the world by creating engaging exercises. Add an exercise
|
||||
now.
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
@@ -134,14 +134,6 @@
|
||||
const link = `${window.location.origin}/course/${course.slug}`;
|
||||
window.open(link, '_blank');
|
||||
}
|
||||
|
||||
async function handlePublish() {
|
||||
loading = true;
|
||||
await updateCourse(courseId, undefined, {
|
||||
is_published: true
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<aside
|
||||
@@ -182,12 +174,6 @@
|
||||
onClick={handleSave}
|
||||
isLoading={loading}
|
||||
/>
|
||||
<PrimaryButton
|
||||
label="Publish"
|
||||
type="button"
|
||||
onClick={handlePublish}
|
||||
isDisabled={loading}
|
||||
/>
|
||||
<IconButton onClick={handlePreview} disabled={loading || !course.slug}>
|
||||
<ArrowUpRightIcon size={24} class="carbon-icon dark:text-white" title="Preview" />
|
||||
</IconButton>
|
||||
|
||||
@@ -7,6 +7,8 @@
|
||||
export let headerClassName = '';
|
||||
export let onClick = () => {};
|
||||
export let isPageNavHidden = false;
|
||||
|
||||
$: padding = isPageNavHidden ? `pb-20 px-4` : padding;
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
||||
@@ -4,63 +4,114 @@ import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Elements Quiz',
|
||||
description: 'Test your knowledge of HTML elements.',
|
||||
description: 'Test your knowledge of HTML elements',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does the <p> element stand for?',
|
||||
name: 'p_element',
|
||||
points: 2,
|
||||
order: 1,
|
||||
title: 'Which HTML tag is used to define the structure of an HTML document?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Paragraph', is_correct: true },
|
||||
{ label: 'Page', is_correct: false },
|
||||
{ label: 'Preformatted', is_correct: false }
|
||||
{ label: '<html>', is_correct: true },
|
||||
{ label: '<head>', is_correct: false },
|
||||
{ label: '<body>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML element is used for creating an unordered list?',
|
||||
name: 'ul_element',
|
||||
points: 2,
|
||||
title: 'How can you create a hyperlink in HTML?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "<a href='url'>link text</a>", is_correct: true },
|
||||
{ label: "<link href='url'>link text</link>", is_correct: false },
|
||||
{ label: '<hyperlink>link text</hyperlink>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a paragraph?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<ul>', is_correct: true },
|
||||
{ label: '<ol>', is_correct: false },
|
||||
{ label: '<p>', is_correct: true },
|
||||
{ label: '<paragraph>', is_correct: false },
|
||||
{ label: '<para>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create an ordered list in HTML?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<ol>', is_correct: true },
|
||||
{ label: '<ul>', is_correct: false },
|
||||
{ label: '<li>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the <a> element do?',
|
||||
name: 'a_element',
|
||||
points: 2,
|
||||
order: 3,
|
||||
title: 'Which HTML tag is used to define a table?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Defines a hyperlink', is_correct: true },
|
||||
{ label: 'Creates a table', is_correct: false },
|
||||
{ label: 'Adds an image', is_correct: false },
|
||||
{ label: 'Defines a form', is_correct: false }
|
||||
{ label: '<table>', is_correct: true },
|
||||
{ label: '<tab>', is_correct: false },
|
||||
{ label: '<tb>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML element is used for creating a line break?',
|
||||
name: 'br_element',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<br>', is_correct: true },
|
||||
{ label: '<p>', is_correct: false },
|
||||
{ label: '<hr>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the <h1> to <h6> elements represent?',
|
||||
name: 'h_elements',
|
||||
points: 2,
|
||||
title: 'How do you insert an image in HTML?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: "<img src='image.jpg'>", is_correct: true },
|
||||
{ label: "<image href='image.jpg'>", is_correct: false },
|
||||
{ label: "<picture src='image.jpg'>", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'div' element in HTML?",
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Define a division or a section', is_correct: true },
|
||||
{ label: 'Create a link', is_correct: false },
|
||||
{ label: 'Insert a video', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the use of the 'hr' element in HTML.",
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'iframe' element in HTML?",
|
||||
name: 'q9',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you create an unordered list in HTML?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
|
||||
@@ -4,65 +4,113 @@ import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Attributes Quiz',
|
||||
description: 'Test your knowledge of HTML attributes.',
|
||||
description: 'Test your knowledge of HTML attributes',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML attribute is used to define inline styles?',
|
||||
name: 'inline_style',
|
||||
points: 2,
|
||||
order: 1,
|
||||
title: "What does the 'href' attribute specify?",
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'class', is_correct: false },
|
||||
{ label: 'style', is_correct: true },
|
||||
{ label: 'src', is_correct: false }
|
||||
{ label: 'The source URL of an image', is_correct: false },
|
||||
{ label: 'The target of a hyperlink', is_correct: true },
|
||||
{ label: 'The name of a form field', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'href' attribute in the <a> element?",
|
||||
name: 'href_attribute',
|
||||
points: 2,
|
||||
title: 'How can you make a text input field read-only in HTML?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "By using the 'disabled' attribute", is_correct: false },
|
||||
{ label: "By using the 'readonly' attribute", is_correct: true },
|
||||
{ label: "By using the 'read-only' attribute", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to define inline styles?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'style', is_correct: true },
|
||||
{ label: 'css', is_correct: false },
|
||||
{ label: 'inline', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you specify multiple CSS classes for an HTML element?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "Use the 'multiple-classes' attribute", is_correct: false },
|
||||
{ label: 'Separate class names with spaces', is_correct: true },
|
||||
{ label: "Use the 'classlist' attribute", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to provide additional information about an element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'alt', is_correct: false },
|
||||
{ label: 'title', is_correct: true },
|
||||
{ label: 'description', is_correct: false },
|
||||
{ label: 'info', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'alt' attribute in an image tag?",
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Define the alignment of the image', is_correct: false },
|
||||
{ label: 'Provide alternative text for the image', is_correct: true },
|
||||
{ label: "Specify the image's width", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the use of the 'placeholder' attribute in an input field.",
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to specify an alternate text for an image?',
|
||||
name: 'alt_attribute',
|
||||
title: 'How can you create a tooltip for an element using HTML attributes?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'title', is_correct: false },
|
||||
{ label: 'alt', is_correct: true },
|
||||
{ label: 'src', is_correct: false }
|
||||
]
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "What does the 'target' attribute in the <a> element control?",
|
||||
name: 'target_attribute',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'The size of the link', is_correct: false },
|
||||
{ label: 'The position of the link', is_correct: false },
|
||||
{ label: 'Where the linked document will open', is_correct: true },
|
||||
{ label: 'The color of the link', is_correct: false }
|
||||
]
|
||||
title: 'Which HTML attribute is used to define the source URL of an iframe?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to specify the URL of a linked resource?',
|
||||
name: 'href_attribute2',
|
||||
title: "Explain the purpose of the 'disabled' attribute in an input field.",
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'src', is_correct: false },
|
||||
{ label: 'href', is_correct: true },
|
||||
{ label: 'alt', is_correct: false }
|
||||
]
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Headings Quiz',
|
||||
description: 'Test your knowledge of HTML headings',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML tag is used for the main heading in a document?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<main>', is_correct: false },
|
||||
{ label: '<title>', is_correct: false },
|
||||
{ label: '<h1>', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How many levels of headings are available in HTML?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '3', is_correct: false },
|
||||
{ label: '4', is_correct: false },
|
||||
{ label: '6', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used for the smallest heading?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<h6>', is_correct: true },
|
||||
{ label: '<h1>', is_correct: false },
|
||||
{ label: '<h3>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can you change the appearance of headings using CSS?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Yes', is_correct: true },
|
||||
{ label: 'No', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used for second-level headings?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '<h2>', is_correct: true },
|
||||
{ label: '<h3>', is_correct: false },
|
||||
{ label: '<h1>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of using semantic headings in HTML?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To improve SEO', is_correct: true },
|
||||
{ label: 'To add background colors', is_correct: false },
|
||||
{ label: 'To control font size', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the difference between an 'h1' element and an 'h2' element in HTML.",
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you align a heading to the center using CSS?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "What is the default font size for an 'h3' element in HTML?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of using heading elements in HTML?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,119 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Paragraphs Quiz',
|
||||
description: 'Test your knowledge of HTML paragraphs',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML tag is used to define a paragraph?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<p>', is_correct: true },
|
||||
{ label: '<para>', is_correct: false },
|
||||
{ label: '<text>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you create a line break in HTML?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<br>', is_correct: true },
|
||||
{ label: '<lb>', is_correct: false },
|
||||
{ label: '<linebreak>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'align' attribute in the 'p' tag?",
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To specify the font size', is_correct: false },
|
||||
{ label: 'To specify the text alignment', is_correct: true },
|
||||
{ label: 'To add a border around the paragraph', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a preformatted text?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<pre>', is_correct: true },
|
||||
{ label: '<text>', is_correct: false },
|
||||
{ label: '<code>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you emphasize text in HTML?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '<strong>', is_correct: true },
|
||||
{ label: '<em>', is_correct: true },
|
||||
{ label: '<b>', is_correct: false },
|
||||
{ label: '<i>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'blockquote' element in HTML?",
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To create a quotation', is_correct: true },
|
||||
{ label: 'To add a background color', is_correct: false },
|
||||
{ label: 'To insert an image', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the use of the 'q' element in HTML.",
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you create a subscript text in HTML?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "What does the 'cite' attribute in the 'blockquote' element specify?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you create a superscript text in HTML?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,120 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Styles Quiz',
|
||||
description: 'Test your knowledge of HTML styles',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML attribute is used to add inline styles?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'style', is_correct: true },
|
||||
{ label: 'css', is_correct: false },
|
||||
{ label: 'class', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of CSS in web development?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To add interactivity to a webpage', is_correct: false },
|
||||
{ label: 'To define the structure of a webpage', is_correct: false },
|
||||
{ label: 'To style the appearance of a webpage', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you include an external CSS file in an HTML document?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Using the <script> tag', is_correct: false },
|
||||
{ label: 'Using the <link> tag', is_correct: true },
|
||||
{ label: 'Using the <style> tag', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'id' attribute in HTML?",
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To define a class for styling', is_correct: false },
|
||||
{ label: 'To define a unique identifier for an element', is_correct: true },
|
||||
{ label: 'To create a hyperlink', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you select multiple HTML elements with a specific class using CSS?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '.classname', is_correct: true },
|
||||
{ label: '#idname', is_correct: false },
|
||||
{ label: 'elementname.classname', is_correct: false },
|
||||
{ label: 'elementname#idname', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'color' property in CSS?",
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To specify the background color', is_correct: false },
|
||||
{ label: 'To specify the font size', is_correct: false },
|
||||
{ label: 'To define the text color', is_correct: true },
|
||||
{ label: 'To set the margin', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the difference between 'padding' and 'margin' in CSS.",
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you center-align an element horizontally using CSS?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "What does the 'font-family' property in CSS specify?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you apply styles to all <p> elements within a <div> element using CSS?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,224 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Formatting Quiz',
|
||||
description: 'Test your knowledge of HTML Formatting',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML tag is used to define bold text?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<b>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<strong>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<bold>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create italicized text?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: '<italic>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<i>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<em>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What HTML tag is used to define a superscripted text?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: '<sup>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<super>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<sub>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'small' element in HTML?",
|
||||
name: 'q4',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To make text smaller',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To highlight text',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text bold',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a line break?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: '<br>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<lb>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<linebreak>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'mark' element in HTML?",
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To highlight text',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To underline text',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a subscripted text?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: '<sub>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<sup>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<subscript>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'del' element in HTML?",
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To define a deleted text',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text bold',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a horizontal rule?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<hr>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<line>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<rule>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'ins' element in HTML?",
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To define an inserted text',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To underline text',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,224 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Quotation Elements Quiz',
|
||||
description: 'Test your knowledge of HTML Quotation Elements',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML tag is used to define a short quotation?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<q>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<quote>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<short>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'blockquote' element in HTML?",
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To define a block of text as a quotation',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a bullet list',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text bold',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a long quotation?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<longquote>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<q>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<blockquote>',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'cite' element in HTML?",
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'To define the title of a document',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To define the source of a quotation',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a quotation citation?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: '<cite>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<quotation>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<source>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'abbr' element in HTML?",
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: 'To define an abbreviation',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a bullet list',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text italic',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define an abbreviation?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: '<abbr>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<abbrev>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<ab>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'dfn' element in HTML?",
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: 'To define a definition',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a dropdown list',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text bold',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a definition?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<definition>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<def>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<dfn>',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'mark' element in HTML?",
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'To highlight text',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text italic',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,220 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Comments Quiz',
|
||||
description: 'Test your knowledge of HTML Comments',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'How do you start an HTML comment?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<!--',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<comment>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<html-comment>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you end an HTML comment?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '-->',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '</comment>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '</html-comment>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of HTML comments?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To provide information to the browser',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To display text on the webpage',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can you nest comments in HTML?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'Yes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'No',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the correct syntax for adding a comment in an HTML document?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<!-- This is a comment -->',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<! This is a comment !>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '// This is a comment',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'In HTML, comments are visible to:',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'Web developers only',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Both web developers and users',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Web users only',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of hiding comments in HTML?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: 'To prevent comments from being displayed in the browser',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To make comments bold',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you hide comments in HTML?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: '<!--#comment-->',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<!--!comment-->',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<!--*comment*-->',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of conditional comments in HTML?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To target specific versions of Internet Explorer',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a dropdown list',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text bold',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a conditional comment for Internet Explorer 9 and below?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<!--[if lt IE 9]>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<!--[if IE 9]>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<!--[if gt IE 9]>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,224 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Colors Quiz',
|
||||
description: 'Test your knowledge of HTML Colors',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the hexadecimal color code for red?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '#FF0000',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '#00FF00',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '#0000FF',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the background color of an element?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'background-color',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'color',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'border-color',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you specify a color in CSS using its name?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'color: red;',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'color: #FF0000;',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'color: rgb(255, 0, 0);',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the RGB value for the color green?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'rgb(0, 128, 0)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'rgb(255, 0, 0)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'rgb(0, 0, 255)',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the text color of an element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'color',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'text-color',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'font-color',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the hexadecimal color code for blue?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '#0000FF',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '#FF0000',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '#00FF00',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What does the 'opacity' CSS property control?",
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'The transparency of an element',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The size of an element',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The font of an element',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you specify a color in CSS using RGBA?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'color: rgba(255, 0, 0, 0.5);',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'color: rgb(0, 128, 0, 0.5);',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'color: rgba(0, 0, 255);',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the HSL value for the color yellow?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'hsl(60, 100%, 50%)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'hsl(0, 100%, 50%)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'hsl(120, 100%, 50%)',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you specify a color in CSS using HSLA?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'color: hsla(120, 100%, 50%, 0.5);',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'color: hsl(60, 100%, 50%, 0.5);',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'color: hsla(0, 100%, 50%);',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,129 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML CSS Quiz',
|
||||
description: 'Test your knowledge of HTML and CSS',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does CSS stand for?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Cascading Style Sheets', is_correct: true },
|
||||
{ label: 'Computer Style Sheets', is_correct: false },
|
||||
{ label: 'Creative Style Sheets', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to include an external CSS file?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<link>', is_correct: true },
|
||||
{ label: '<style>', is_correct: false },
|
||||
{ label: '<css>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the default value of the 'display' property in CSS for most elements?",
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'block', is_correct: false },
|
||||
{ label: 'inline', is_correct: false },
|
||||
{ label: 'inline-block', is_correct: false },
|
||||
{ label: 'block or inline depending on the element', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "How do you select all elements with the class name 'example' in CSS?",
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '.example', is_correct: true },
|
||||
{ label: '#example', is_correct: false },
|
||||
{ label: 'element.example', is_correct: false },
|
||||
{ label: 'example', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'box-sizing' property in CSS?",
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Control the background box', is_correct: false },
|
||||
{ label: 'Adjust the size of the box', is_correct: false },
|
||||
{ label: 'Define the display type', is_correct: false },
|
||||
{ label: 'Specify how the total width and height are calculated', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to control the text color of an element?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'text-color', is_correct: false },
|
||||
{ label: 'color', is_correct: true },
|
||||
{ label: 'font-color', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'margin' property in CSS?",
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Set the width of an element', is_correct: false },
|
||||
{ label: 'Define the spacing outside the element', is_correct: true },
|
||||
{ label: 'Change the background color', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you comment out multiple lines of CSS code?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '/* ... */', is_correct: true },
|
||||
{ label: '// ...', is_correct: false },
|
||||
{ label: '<!-- ... -->', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'position' property in CSS?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of CSS specificity.',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,225 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Links Quiz',
|
||||
description: 'Test your knowledge of HTML Links',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML tag is used to create a hyperlink?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<a>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<link>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<hlink>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What does the 'href' attribute in the 'a' tag specify?",
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'The URL of the linked page',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The color of the link',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The heading of the linked page',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you open a link in a new browser window or tab?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: "target='_new'",
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: "target='_blank'",
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: "target='_window'",
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to specify the email address in an email link?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'mailto',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'email',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'href',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a bookmark link in HTML?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: "<a href='#bookmark'>",
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<bookmark>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: "<a href='bookmark'>",
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'target' attribute in the 'a' tag?",
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To specify where to open the linked document',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To change the font color of the link',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To add a border around the link',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a link to an external webpage?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: "<a href='http://www.example.com'>",
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: "<a src='http://www.example.com'>",
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: "<a link='http://www.example.com'>",
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'rel' attribute in the 'a' tag?",
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label:
|
||||
'To specify the relationship between the current document and the linked document',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To add a background color to the link',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To underline the link',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a link that opens the email client to send an email?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: "<a href='mailto:[email protected]'>",
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: "<a href='[email protected]'>",
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: "<a send='[email protected]'>",
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'download' attribute in the 'a' tag?",
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'To specify that the target will be downloaded when a user clicks on the link',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To change the font size of the link',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To add a border around the link',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,135 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Images Quiz',
|
||||
description: 'Test your knowledge of HTML images',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML element is used to display an image?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<img>', is_correct: true },
|
||||
{ label: '<image>', is_correct: false },
|
||||
{ label: '<picture>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'src' attribute in an HTML image?",
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "It specifies the image's width", is_correct: false },
|
||||
{ label: "It defines the image's source URL", is_correct: true },
|
||||
{ label: "It sets the image's alt text", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you specify the width and height of an HTML image?',
|
||||
name: 'q3',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: "Using the 'width' and 'height' attributes", is_correct: true },
|
||||
{ label: 'Using CSS styles', is_correct: true },
|
||||
{ label: 'Using JavaScript', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What does the 'alt' attribute in an HTML image do?",
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "It defines the image's source URL", is_correct: false },
|
||||
{ label: "It specifies the image's width", is_correct: false },
|
||||
{ label: 'It provides alternative text for the image', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Which attribute is used to provide a text description for an image for accessibility?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'title', is_correct: false },
|
||||
{ label: 'alt', is_correct: true },
|
||||
{ label: 'description', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you make an image a clickable link?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Wrap the image in an <a> element', is_correct: true },
|
||||
{ label: "Use the 'href' attribute on the <img> element", is_correct: false },
|
||||
{ label: "Add an 'onclick' attribute to the image", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'title' attribute in an HTML image?",
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "It defines the image's title", is_correct: false },
|
||||
{ label: 'It provides a tooltip text for the image', is_correct: true },
|
||||
{ label: "It sets the image's width", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML element is used to define a clickable area within an image?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<area>', is_correct: true },
|
||||
{ label: '<map>', is_correct: false },
|
||||
{ label: '<link>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What does the 'usemap' attribute in an HTML image do?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "It specifies the image's source URL", is_correct: false },
|
||||
{ label: 'It links to an external map file', is_correct: false },
|
||||
{ label: 'It defines an image map to be used', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to set the initial width of an image in pixels?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'width', is_correct: true },
|
||||
{ label: 'height', is_correct: false },
|
||||
{ label: 'size', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,137 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Favicon Quiz',
|
||||
description: 'Test your knowledge of HTML favicons',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of a favicon in an HTML document?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To set the background color of the web page', is_correct: false },
|
||||
{ label: "To specify the website's title", is_correct: false },
|
||||
{ label: 'To provide a small icon for the browser tab', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML element is used to define a favicon?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<icon>', is_correct: false },
|
||||
{ label: '<favicon>', is_correct: false },
|
||||
{ label: '<link>', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the recommended size for a favicon image?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '16x16 pixels', is_correct: true },
|
||||
{ label: '32x32 pixels', is_correct: false },
|
||||
{ label: '64x64 pixels', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Where should you place the <link> element for the favicon in an HTML document?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'In the <body> section', is_correct: false },
|
||||
{ label: 'In the <footer> section', is_correct: false },
|
||||
{ label: 'In the <head> section', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which file format is commonly used for favicons?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '.ico', is_correct: true },
|
||||
{ label: '.jpg', is_correct: false },
|
||||
{ label: '.png', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you specify a favicon for different devices with different sizes?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Use multiple <link> elements with different sizes', is_correct: true },
|
||||
{ label: 'Specify the size in the <img> element', is_correct: false },
|
||||
{ label: 'Use JavaScript to detect the device size', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'sizes' attribute in a favicon <link> element?",
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To set the background color of the favicon', is_correct: false },
|
||||
{ label: 'To specify the dimensions of the favicon image', is_correct: true },
|
||||
{ label: 'To define the shape of the favicon', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What should you do if a browser does not support favicons?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Use a larger image in the <body> section', is_correct: false },
|
||||
{ label: 'Include a text-based alternative in the <head> section', is_correct: false },
|
||||
{ label: 'Do nothing; modern browsers all support favicons', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the default name for a favicon file?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'favicon.ico', is_correct: true },
|
||||
{ label: 'icon.png', is_correct: false },
|
||||
{ label: 'favicon.png', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'rel' attribute in a favicon <link> element?",
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To specify the relationship between the favicon and the website',
|
||||
is_correct: true
|
||||
},
|
||||
{ label: 'To set the background color of the favicon', is_correct: false },
|
||||
{ label: 'To define the dimensions of the favicon image', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,135 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Page Title Quiz',
|
||||
description: 'Test your knowledge of HTML page titles',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML element is used to specify the title of a web page?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<head>', is_correct: false },
|
||||
{ label: '<title>', is_correct: true },
|
||||
{ label: '<body>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Where should you place the <title> element in an HTML document?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'In the <body> section', is_correct: false },
|
||||
{ label: 'In the <footer> section', is_correct: false },
|
||||
{ label: 'In the <head> section', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the <title> element?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "To specify the website's background color", is_correct: false },
|
||||
{ label: "To set the website's font style", is_correct: false },
|
||||
{ label: "To define the title displayed in the browser's title bar", is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can you have multiple <title> elements in a single HTML document?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Yes, but only one will be displayed', is_correct: false },
|
||||
{ label: 'No, there can be only one <title> element', is_correct: true },
|
||||
{ label: 'Yes, all of them will be displayed', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to provide alternative text for an <img> element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'alt', is_correct: true },
|
||||
{ label: 'title', is_correct: false },
|
||||
{ label: 'src', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How should you format the text inside the <title> element?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'In UPPERCASE letters', is_correct: false },
|
||||
{ label: 'In Sentence case', is_correct: true },
|
||||
{ label: 'In lowercase letters', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the maximum length of the text you can put inside a <title> element?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '255 characters', is_correct: false },
|
||||
{ label: '512 characters', is_correct: false },
|
||||
{ label: 'Depends on the browser', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of setting a page title?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "To specify the page's background color", is_correct: false },
|
||||
{ label: "To define the page's layout", is_correct: false },
|
||||
{ label: 'To provide a meaningful title for the web page', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the HTML tag used to display the page title in the browser's title bar?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<h1>', is_correct: false },
|
||||
{ label: '<p>', is_correct: false },
|
||||
{ label: '<title>', is_correct: false },
|
||||
{ label: '<head>', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the recommended length for a page title?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '1-3 words', is_correct: false },
|
||||
{ label: '3-5 words', is_correct: true },
|
||||
{ label: 'Unlimited length', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,137 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Tables Quiz',
|
||||
description: 'Test your knowledge of HTML tables',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML tag is used to create a table?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<table>', is_correct: true },
|
||||
{ label: '<tr>', is_correct: false },
|
||||
{ label: '<td>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a table row?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<table>', is_correct: false },
|
||||
{ label: '<tr>', is_correct: true },
|
||||
{ label: '<td>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the <th> element in an HTML table?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To create a new table', is_correct: false },
|
||||
{ label: 'To define a table header cell', is_correct: true },
|
||||
{ label: 'To define a table data cell', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a table data cell?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<th>', is_correct: false },
|
||||
{ label: '<td>', is_correct: true },
|
||||
{ label: '<tr>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What attribute is used to define the alignment of the content inside a table cell?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'align', is_correct: false },
|
||||
{ label: 'valign', is_correct: false },
|
||||
{ label: 'style', is_correct: false },
|
||||
{ label: 'text-align', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you create a border around an HTML table?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Using the <border> element', is_correct: false },
|
||||
{ label: "Setting the border attribute to '1'", is_correct: true },
|
||||
{ label: 'Using the <table-border> element', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to specify the width of a table border?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'border-width', is_correct: false },
|
||||
{ label: 'border-style', is_correct: false },
|
||||
{ label: 'border-color', is_correct: false },
|
||||
{ label: 'border', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What HTML tag is used to create a table header cell?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<th>', is_correct: true },
|
||||
{ label: '<td>', is_correct: false },
|
||||
{ label: '<tr>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you add a caption to an HTML table?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Using the <caption> element', is_correct: true },
|
||||
{ label: 'Using the <header> element', is_correct: false },
|
||||
{ label: 'Using the <caption-text> element', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to specify the background color of a table?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'bgcolor', is_correct: false },
|
||||
{ label: 'background-color', is_correct: true },
|
||||
{ label: 'table-color', is_correct: false },
|
||||
{ label: 'color', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,130 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Lists Quiz',
|
||||
description: 'Test your knowledge of HTML lists',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML tag is used to create an unordered list?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<ul>', is_correct: true },
|
||||
{ label: '<ol>', is_correct: false },
|
||||
{ label: '<li>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does HTML stand for?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a numbered list?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<ul>', is_correct: false },
|
||||
{ label: '<ol>', is_correct: true },
|
||||
{ label: '<li>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a nested list in HTML?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'By using multiple <ul> elements', is_correct: false },
|
||||
{ label: 'By using multiple <ol> elements', is_correct: false },
|
||||
{ label: 'By using the <li> element within another <li> element', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to start counting the list items from a specific number?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'start', is_correct: true },
|
||||
{ label: 'begin', is_correct: false },
|
||||
{ label: 'value', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What HTML tag is used to define the description list?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<dl>', is_correct: true },
|
||||
{ label: '<ul>', is_correct: false },
|
||||
{ label: '<ol>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define the term in a description list?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<dt>', is_correct: true },
|
||||
{ label: '<dd>', is_correct: false },
|
||||
{ label: '<dl>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define the description in a description list?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<dt>', is_correct: false },
|
||||
{ label: '<dd>', is_correct: true },
|
||||
{ label: '<dl>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a horizontal list?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'By using the <ul> element', is_correct: false },
|
||||
{ label: 'By using the <ol> element', is_correct: false },
|
||||
{ label: 'By using the <li> element with CSS styling', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define an item in a list?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<ul>', is_correct: false },
|
||||
{ label: '<ol>', is_correct: false },
|
||||
{ label: '<li>', is_correct: true }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,122 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Blocks Quiz',
|
||||
description: 'Test your knowledge of HTML blocks',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML tag is used to define an HTML block?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<block>', is_correct: false },
|
||||
{ label: '<div>', is_correct: true },
|
||||
{ label: '<section>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML <div> element?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a paragraph?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<p>', is_correct: true },
|
||||
{ label: '<paragraph>', is_correct: false },
|
||||
{ label: '<par>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you make text bold in HTML?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'By using the <strong> tag', is_correct: true },
|
||||
{ label: 'By using the <bold> tag', is_correct: false },
|
||||
{ label: 'By using CSS styling', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML <section> element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a line break?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<lb>', is_correct: false },
|
||||
{ label: '<break>', is_correct: false },
|
||||
{ label: '<br>', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a hyperlink in HTML?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'By using the <a> tag', is_correct: true },
|
||||
{ label: 'By using the <link> tag', is_correct: false },
|
||||
{ label: 'By using the <hyperlink> tag', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML <aside> element?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a blockquote?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<quote>', is_correct: false },
|
||||
{ label: '<blockquote>', is_correct: true },
|
||||
{ label: '<q>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the HTML <hr> element represent?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A horizontal rule or thematic break', is_correct: true },
|
||||
{ label: 'A hyperlink reference', is_correct: false },
|
||||
{ label: 'A header element', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,146 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Classes Quiz',
|
||||
description: 'Test your knowledge of HTML classes',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the HTML class attribute?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To define a CSS class for styling',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To define a JavaScript function',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create a new HTML element',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you apply a class to an HTML element?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Using the id attribute',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Using the name attribute',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Using the class attribute',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which character is used to separate multiple class names in the class attribute?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: ', (comma)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '. (period)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'space',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you select an element with a specific class using CSS?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of using multiple classes on an HTML element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you apply multiple classes to an HTML element?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the syntax for selecting elements with a specific class using JavaScript?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What does the following CSS rule do: .my-class { color: red; }',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you remove a class from an HTML element using JavaScript?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the :not() pseudo-class in CSS?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'To select elements that do not match a given selector',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To select all elements',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To select child elements',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,129 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML ID Quiz',
|
||||
description: 'Test your knowledge of HTML ID attributes',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the HTML id attribute?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To define a class for styling',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To define a JavaScript function',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To uniquely identify an HTML element',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can multiple HTML elements have the same id?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Yes',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'No',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you select an element with a specific id using CSS?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML name attribute?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you apply an id to an HTML element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the syntax for selecting elements with a specific id using JavaScript?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML data-* attribute?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'To store custom data private to the page or application',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To define a CSS class',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To define JavaScript functions',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the difference between id and class attributes in HTML?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML for attribute?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you remove an id from an HTML element using JavaScript?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,181 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Iframes Quiz',
|
||||
description: 'Test your knowledge of HTML iframes',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does HTML stand for?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Hypertext Markup Language',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Hyperlink and Text Markup Language',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Highly Textual Markup Language',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of an iframe element?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To embed external web content within a web page',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink to another webpage',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To format text and images on a web page',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to specify the source URL of an iframe?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What happens if the src attribute of an iframe is empty?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'The iframe displays an error message',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The iframe is hidden',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The iframe remains blank',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to specify the width of an iframe?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Can an iframe display content from a different domain?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Yes, always',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'No, never',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Yes, if the external domain allows it through CORS',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the frameborder attribute in an iframe?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'To specify the border width',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To allow or disallow scrolling',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To control the display of a border around the iframe',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the allowfullscreen attribute in an iframe?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'To enable or disable fullscreen mode',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To allow the embedded content to be displayed in fullscreen mode',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What does the term 'sandboxing' refer to in iframes?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the scrolling attribute in an iframe?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Auto',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Yes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'No',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,16 +1,66 @@
|
||||
import htmlElements from './001_html_elements';
|
||||
import htmlAttributes from './002_html_attributes';
|
||||
import htmlHeadings from './003_html_headings';
|
||||
import htmlPharagraphs from './004_html_paragraph';
|
||||
import htmlStyles from './005_html_styles';
|
||||
import htmlFormatting from './006_html_formatting';
|
||||
import htmlQuotations from './007_html_quotations';
|
||||
import htmlComments from './008_html_comments';
|
||||
import htmlColors from './009_html_colors';
|
||||
import htmlCss from './010_html_css';
|
||||
import htmlLinks from './011_html_links';
|
||||
import htmlImages from './012_html_images';
|
||||
import htmlFavicon from './013_html_favicon';
|
||||
import htmlPagetitle from './014_html_pageTitle';
|
||||
import htmlTables from './015_html_tables';
|
||||
import htmlLists from './016_html_lists';
|
||||
import htmlBlocks from './017_html_blocks';
|
||||
import htmlClasses from './018_html_classes';
|
||||
import htmlId from './019_html_id';
|
||||
import htmlIframes from './020_html_iframes';
|
||||
|
||||
export const HTML_IDS = {
|
||||
export const HTML_IDS: { [key: string]: string } = {
|
||||
HTML_ELEMENTS: 'HTML_ELEMENTS',
|
||||
HTML_ATTRIBUTES: 'HTML_ATTRIBUTES',
|
||||
HTML_HEADINGS: 'HTML_HEADINGS',
|
||||
HTML_PARAGRAPH: 'HTML_PARAGRAPH'
|
||||
HTML_PARAGRAPH: 'HTML_PARAGRAPH',
|
||||
HTML_STYLES: 'HTML_STYLES',
|
||||
HTML_FORMATTING: 'HTML_FORMATTING',
|
||||
HTML_QUOTATIONS: 'HTML_QUOTATIONS',
|
||||
HTML_COMMENTS: 'HTML_COMMENTS',
|
||||
HTML_COLORS: 'HTML_COLORS',
|
||||
HTML_CSS: 'HTML_CSS',
|
||||
HTML_LINKS: 'HTML_LINKS',
|
||||
HTML_IMAGES: 'HTML_IMAGES',
|
||||
HTML_FAVICON: 'HTML_FAVICON',
|
||||
HTML_PAGETITLE: 'HTML_PAGETITLE',
|
||||
HTML_TABLES: 'HTML_TABLES',
|
||||
HTML_LISTS: 'HTML_LISTS',
|
||||
HTML_BLOCKS: 'HTML_BLOCKS',
|
||||
HTML_CLASSES: 'HTML_CLASSES',
|
||||
HTML_ID: 'HTML_ID',
|
||||
HTML_IFRAMES: 'HTML_IFRAMES'
|
||||
};
|
||||
|
||||
export const HTML_TEMPLATES = {
|
||||
[HTML_IDS.HTML_ELEMENTS]: htmlElements,
|
||||
[HTML_IDS.HTML_ATTRIBUTES]: htmlAttributes,
|
||||
[HTML_IDS.HTML_HEADINGS]: htmlElements,
|
||||
[HTML_IDS.HTML_PARAGRAPH]: htmlElements
|
||||
[HTML_IDS.HTML_HEADINGS]: htmlHeadings,
|
||||
[HTML_IDS.HTML_PARAGRAPH]: htmlPharagraphs,
|
||||
[HTML_IDS.HTML_STYLES]: htmlStyles,
|
||||
[HTML_IDS.HTML_FORMATTING]: htmlFormatting,
|
||||
[HTML_IDS.HTML_QUOTATIONS]: htmlQuotations,
|
||||
[HTML_IDS.HTML_COMMENTS]: htmlComments,
|
||||
[HTML_IDS.HTML_COLORS]: htmlColors,
|
||||
[HTML_IDS.HTML_CSS]: htmlCss,
|
||||
[HTML_IDS.HTML_LINKS]: htmlLinks,
|
||||
[HTML_IDS.HTML_IMAGES]: htmlImages,
|
||||
[HTML_IDS.HTML_FAVICON]: htmlFavicon,
|
||||
[HTML_IDS.HTML_PAGETITLE]: htmlPagetitle,
|
||||
[HTML_IDS.HTML_TABLES]: htmlTables,
|
||||
[HTML_IDS.HTML_LISTS]: htmlLists,
|
||||
[HTML_IDS.HTML_BLOCKS]: htmlBlocks,
|
||||
[HTML_IDS.HTML_CLASSES]: htmlClasses,
|
||||
[HTML_IDS.HTML_ID]: htmlId,
|
||||
[HTML_IDS.HTML_IFRAMES]: htmlIframes
|
||||
};
|
||||
|
||||
+25
-30
@@ -1,4 +1,6 @@
|
||||
import { HTML_IDS, HTML_TEMPLATES } from './html';
|
||||
import { calculateTotalPoints } from './utils';
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
export const TAGS = {
|
||||
HTML: 'HTML',
|
||||
@@ -9,37 +11,30 @@ export const TAGS = {
|
||||
VueJS: 'VueJS'
|
||||
};
|
||||
|
||||
function generateTemplateForTag(
|
||||
keys: { [key: string]: string },
|
||||
templates: {
|
||||
[x: string]: ExerciseTemplate;
|
||||
}
|
||||
) {
|
||||
const template = [];
|
||||
|
||||
for (const key in keys) {
|
||||
const id = keys[key];
|
||||
template.push({
|
||||
id,
|
||||
title: templates[id].title,
|
||||
questions: templates[id].questionnaire.questions.length,
|
||||
points: calculateTotalPoints(templates[id]),
|
||||
data: templates[id]
|
||||
});
|
||||
}
|
||||
|
||||
return template;
|
||||
}
|
||||
|
||||
export const TEMPLATES = {
|
||||
[TAGS.HTML]: [
|
||||
{
|
||||
id: HTML_IDS.HTML_ELEMENTS,
|
||||
title: 'Learn HTML Elements',
|
||||
questions: 10,
|
||||
points: 20,
|
||||
data: HTML_TEMPLATES[HTML_IDS.HTML_ELEMENTS]
|
||||
},
|
||||
{
|
||||
id: HTML_IDS.HTML_ATTRIBUTES,
|
||||
title: 'HTML Attributes',
|
||||
questions: 5,
|
||||
points: 10,
|
||||
data: HTML_TEMPLATES[HTML_IDS.HTML_ATTRIBUTES]
|
||||
},
|
||||
{
|
||||
id: HTML_IDS.HTML_HEADINGS,
|
||||
title: 'Practice HTML Headings',
|
||||
questions: 15,
|
||||
points: 50,
|
||||
data: HTML_TEMPLATES[HTML_IDS.HTML_ELEMENTS]
|
||||
},
|
||||
{
|
||||
id: HTML_IDS.HTML_PARAGRAPH,
|
||||
title: 'Understand p tag',
|
||||
questions: 15,
|
||||
points: 20,
|
||||
data: HTML_TEMPLATES[HTML_IDS.HTML_ELEMENTS]
|
||||
}
|
||||
],
|
||||
[TAGS.HTML]: generateTemplateForTag(HTML_IDS, HTML_TEMPLATES),
|
||||
[TAGS.CSS]: [],
|
||||
[TAGS.JS]: [],
|
||||
[TAGS.Typescript]: [],
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { CustomQuestionType } from '$lib/utils/types';
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
export const QuestionTypes: CustomQuestionType[] = [
|
||||
{
|
||||
@@ -14,3 +15,13 @@ export const QuestionTypes: CustomQuestionType[] = [
|
||||
label: 'TEXTAREA'
|
||||
}
|
||||
];
|
||||
|
||||
export function calculateTotalPoints(template: ExerciseTemplate): number {
|
||||
let totalPoints = 0;
|
||||
|
||||
template.questionnaire.questions.forEach((question) => {
|
||||
totalPoints += question.points;
|
||||
});
|
||||
|
||||
return totalPoints;
|
||||
}
|
||||
|
||||
@@ -294,7 +294,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
|
||||
delete newQuestion.question_type_id;
|
||||
|
||||
// @ts-ignore
|
||||
newQuestion.question_type = { id: question_type_id };
|
||||
newQuestion.question_type = { id: question_type_id, label: question_type.label || '' };
|
||||
newQuestion.id = id;
|
||||
newQuestion.name = name;
|
||||
newQuestion.order = order;
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
let students: GroupPerson[] = [];
|
||||
let isStudent: boolean;
|
||||
let isStudent: boolean = false;
|
||||
let searchValue = '';
|
||||
|
||||
function setAttendance(courseData: CourseData) {
|
||||
@@ -113,9 +113,9 @@
|
||||
}
|
||||
|
||||
// function for the searchbar
|
||||
function searchStudents(query: string) {
|
||||
function searchStudents(query: string, _students: GroupPerson[]) {
|
||||
const lowercaseQuery = query.toLowerCase();
|
||||
return students.filter((student) =>
|
||||
return _students.filter((student) =>
|
||||
student.profile.fullname.toLowerCase().includes(lowercaseQuery)
|
||||
);
|
||||
}
|
||||
@@ -138,7 +138,6 @@
|
||||
$: students = isStudent
|
||||
? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
|
||||
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
|
||||
$: console.log(students);
|
||||
</script>
|
||||
|
||||
<CourseContainer bind:isStudent>
|
||||
@@ -180,7 +179,7 @@
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
|
||||
{#each searchStudents(searchValue) as student}
|
||||
{#each searchStudents(searchValue, students) as student}
|
||||
<StructuredListBody>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell>
|
||||
|
||||
@@ -75,11 +75,9 @@
|
||||
});
|
||||
});
|
||||
|
||||
$: {
|
||||
students = isStudent
|
||||
? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
|
||||
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
|
||||
}
|
||||
$: students = isStudent
|
||||
? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
|
||||
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
|
||||
</script>
|
||||
|
||||
<CourseContainer bind:isStudent>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import OrgSettings from '$lib/components/Org/Settings/index.svelte';
|
||||
import ViewSiteBtn from '$lib/components/Buttons/VisitOrgSite.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -10,6 +11,8 @@
|
||||
<div class="py-10 px-5">
|
||||
<div class="flex items-center justify-between mb-10">
|
||||
<h1 class="dark:text-white text-3xl font-bold">Settings</h1>
|
||||
|
||||
<ViewSiteBtn />
|
||||
</div>
|
||||
|
||||
<OrgSettings />
|
||||
|
||||
Reference in New Issue
Block a user