Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio into notification
This commit is contained in:
Rotimi Best
@@ -7,8 +7,7 @@
|
||||
<div class="mb-3">
|
||||
{#each tabs as tab}
|
||||
<button
|
||||
class="mr-3 pb-2 border-t-0 border-l-0 border-r-0 {selectedTab ===
|
||||
tab.value
|
||||
class="mr-3 pb-2 border-t-0 border-l-0 border-r-0 {selectedTab === tab.value
|
||||
? 'border-b-4 border-indigo-600 focus:border-indigo-600'
|
||||
: 'border-b-0'}"
|
||||
on:click={() => (selectedTab = tab.value)}
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
import APPS_CONSTANTS from './constants';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
let selectedApp;
|
||||
let resize = false;
|
||||
let isDragging = false;
|
||||
let startX;
|
||||
@@ -24,6 +23,8 @@
|
||||
let appBarRef;
|
||||
let appContentRef;
|
||||
|
||||
let topPadding = $apps.isStudent ? '48px' : '109px';
|
||||
|
||||
const getResizableSidebar = () => {
|
||||
if (!browser) return;
|
||||
|
||||
@@ -31,31 +32,33 @@
|
||||
};
|
||||
|
||||
function handleClose() {
|
||||
selectedApp = null;
|
||||
$apps.selectedApp = null;
|
||||
if (getResizableSidebar()) {
|
||||
appBarRef.style.width = '60px';
|
||||
} else if (!getResizableSidebar() && $apps.isStudent) {
|
||||
$apps.open = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleAppClick(appName) {
|
||||
if (!selectedApp && getResizableSidebar()) {
|
||||
if (!$apps.selectedApp && getResizableSidebar()) {
|
||||
if (window.innerWidth <= 1024) {
|
||||
appBarRef.style.width = '300px';
|
||||
} else {
|
||||
appBarRef.style.width = '500px';
|
||||
}
|
||||
}
|
||||
if (appName === selectedApp) {
|
||||
if (appName === $apps.selectedApp) {
|
||||
handleClose();
|
||||
} else {
|
||||
selectedApp = appName;
|
||||
$apps.selectedApp = appName;
|
||||
}
|
||||
$apps.dropdown = false;
|
||||
}
|
||||
|
||||
function handleCursor(event) {
|
||||
if (!getResizableSidebar()) return;
|
||||
if (!resize && selectedApp) {
|
||||
if (!resize && $apps.selectedApp) {
|
||||
const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 8;
|
||||
const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 8;
|
||||
|
||||
@@ -68,7 +71,7 @@
|
||||
}
|
||||
|
||||
function startDragging(event) {
|
||||
if (event.button === 0 && selectedApp) {
|
||||
if (event.button === 0 && $apps.selectedApp) {
|
||||
event.preventDefault();
|
||||
const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5;
|
||||
const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5;
|
||||
@@ -93,7 +96,7 @@
|
||||
|
||||
function dragSidebar(event) {
|
||||
if (!getResizableSidebar()) return;
|
||||
if (!isDragging || !selectedApp) return;
|
||||
if (!isDragging || !$apps.selectedApp) return;
|
||||
const deltaX = startX - event.clientX + 60;
|
||||
let newWidth = initialWidth + deltaX;
|
||||
if (newWidth <= 250) {
|
||||
@@ -105,14 +108,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
function updateTopPadding(isStudent) {
|
||||
topPadding = isStudent ? '48px' : '109px';
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
updateTopPadding($apps.isStudent);
|
||||
if (getResizableSidebar()) {
|
||||
appBarRef.addEventListener('mousedown', startDragging);
|
||||
document.addEventListener('mousemove', dragSidebar);
|
||||
document.addEventListener('mouseup', stopDragging);
|
||||
document.addEventListener('mousemove', handleCursor);
|
||||
}
|
||||
|
||||
hotkeys('A+1,A+2,A+3,A+4', function (event, handler) {
|
||||
event.preventDefault();
|
||||
switch (handler.key) {
|
||||
@@ -140,10 +147,12 @@
|
||||
document.removeEventListener('mousemove', handleCursor);
|
||||
}
|
||||
});
|
||||
$: updateTopPadding($apps.isStudent);
|
||||
$: getResizableSidebar();
|
||||
</script>
|
||||
|
||||
<div
|
||||
style={`--top-padding:${topPadding}`}
|
||||
class={`${$apps.open ? 'open dark:bg-black' : 'close dark:bg-black'} root`}
|
||||
bind:this={appBarRef}
|
||||
>
|
||||
@@ -165,7 +174,7 @@
|
||||
toolTipProps={{ title: 'Live Chat', hotkeys: ['A', '1'] }}
|
||||
value={APPS_CONSTANTS.APPS.LIVE_CHAT}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}
|
||||
selected={APPS_CONSTANTS.APPS.LIVE_CHAT === $apps.selectedApp}
|
||||
>
|
||||
<SendAlt size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
@@ -174,7 +183,7 @@
|
||||
toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
|
||||
value={APPS_CONSTANTS.APPS.QANDA}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}
|
||||
selected={APPS_CONSTANTS.APPS.QANDA === $apps.selectedApp}
|
||||
>
|
||||
<Forum size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
@@ -183,7 +192,7 @@
|
||||
toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }}
|
||||
value={APPS_CONSTANTS.APPS.NOTES}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}
|
||||
selected={APPS_CONSTANTS.APPS.NOTES === $apps.selectedApp}
|
||||
>
|
||||
<AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
@@ -192,26 +201,26 @@
|
||||
toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
|
||||
value={APPS_CONSTANTS.APPS.POLL}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.POLL === selectedApp}
|
||||
selected={APPS_CONSTANTS.APPS.POLL === $apps.selectedApp}
|
||||
>
|
||||
<ChartPie size={24} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
{#if !!selectedApp}
|
||||
{#if !!$apps.selectedApp}
|
||||
<div
|
||||
class={`app cursor-auto lg:cursor-ew-resize ${
|
||||
resize && ' border-l-8 border-l-blue-500 transition-none'
|
||||
} `}
|
||||
bind:this={appContentRef}
|
||||
>
|
||||
{#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
|
||||
{#if $apps.selectedApp === APPS_CONSTANTS.APPS.QANDA}
|
||||
<QandA {handleClose} />
|
||||
{:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
|
||||
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
|
||||
<LiveChat {handleClose} />
|
||||
{:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
|
||||
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.POLL}
|
||||
<Poll {handleClose} />
|
||||
{:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
|
||||
{:else if $apps.selectedApp === APPS_CONSTANTS.APPS.NOTES}
|
||||
<Notes {handleClose} />
|
||||
{/if}
|
||||
</div>
|
||||
@@ -266,14 +275,15 @@
|
||||
@media screen and (max-width: 1023px) {
|
||||
.root {
|
||||
position: absolute;
|
||||
height: calc(100vh - 109px);
|
||||
top: 109px;
|
||||
height: calc(100vh - var(--top-padding));
|
||||
top: var(--top-padding);
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
.open {
|
||||
position: absolute;
|
||||
transform: translateX(0);
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.close {
|
||||
|
||||
@@ -2,5 +2,7 @@ import { writable } from 'svelte/store';
|
||||
|
||||
export const apps = writable({
|
||||
open: false,
|
||||
dropdown: false
|
||||
dropdown: false,
|
||||
selectedApp: null,
|
||||
isStudent: false
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
<p class=" text-center text-sm font-normal">
|
||||
Select file( Mp4, MOV, AVI) to upload to your lesson.
|
||||
</p>
|
||||
<p>(Max 30 MB)</p>
|
||||
<p>(Max 80 MB)</p>
|
||||
</span>
|
||||
{/if}
|
||||
<input
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
import Confetti from '../Confetti/index.svelte';
|
||||
import { isMobile } from '$lib/utils/store/useMobile';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
|
||||
import { apps } from '$lib/components/Apps/store';
|
||||
export let path = '';
|
||||
export let isExercisePage = false;
|
||||
export let isStudent = false;
|
||||
@@ -18,6 +18,7 @@
|
||||
|
||||
if (user) {
|
||||
isStudent = user.role_id === 3;
|
||||
$apps.isStudent = isStudent;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
<a
|
||||
class="mr-5 pb-2 text-sm font-bold flex items-center relative {item.isActive
|
||||
? 'text-primary-700'
|
||||
: 'dark:text-white text-black'}"
|
||||
: 'dark:text-white text-black'} hover:no-underline"
|
||||
href={item.href}
|
||||
>
|
||||
{item.label}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</script>
|
||||
|
||||
<div class="w-full flex flex-col">
|
||||
<div class="flex items-center border-b w-full overflow-x-auto">
|
||||
<div class="flex items-center border-b w-full overflow-x-auto mb-2">
|
||||
{#each tabs as tab}
|
||||
{#if !tab.icon && !tab.badgeValue}
|
||||
<button
|
||||
@@ -58,7 +58,7 @@
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<div class="mt-5">
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="root flex flex-col gap-2 items-center justify-center w-screen h-[calc(100vh-48px)] text-center bg-[#F3F5F9] dark:bg-black text-black dark:text-white"
|
||||
>
|
||||
<img src="./unauthorized.svg" alt="unauthorized" class="w-[220px]" />
|
||||
<p class=" text-black dark:text-white text-4xl md:text-5xl font-bold">Page not found</p>
|
||||
<p class=" text-[#656565] dark:text-white text-base font-[400] mb-2 mt-1">
|
||||
The page you are trying to access does not exist
|
||||
</p>
|
||||
|
||||
<PrimaryButton label="Go Home" onClick={() => goto('https://www.classroomio.com')} />
|
||||
<PrimaryButton
|
||||
label="Help"
|
||||
variant={VARIANTS.LINK}
|
||||
onClick={() => goto('https://help.classroomio.com/')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
import Download from 'carbon-icons-svelte/lib/Download.svelte';
|
||||
import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
|
||||
import { apps } from '$lib/components/Apps/store';
|
||||
import APPS_CONSTANTS from '$lib/components/Apps/constants';
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import { lesson, lessons } from '$lib/components/Course/components/Lesson/store/lessons';
|
||||
import { browser } from '$app/environment';
|
||||
@@ -197,6 +198,11 @@
|
||||
mode = mode === MODES.edit ? MODES.view : MODES.edit;
|
||||
}
|
||||
|
||||
function handleAppClick(appName) {
|
||||
$apps.selectedApp = appName;
|
||||
$apps.open = true;
|
||||
}
|
||||
|
||||
$: path = $page.url?.pathname?.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
|
||||
|
||||
$: if (data.courseId && browser) {
|
||||
@@ -311,6 +317,7 @@
|
||||
{/if}
|
||||
<button
|
||||
class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
|
||||
on:click={() => handleAppClick(APPS_CONSTANTS.APPS.LIVE_CHAT)}
|
||||
>
|
||||
<SendAlt size={24} class="carbon-icon" />
|
||||
<span class="ml-1">{$lesson.comments}</span>
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<svg width="264" height="222" viewBox="0 0 264 222" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="46.5" cy="148.559" r="45.5158" stroke="#ACBDEC" stroke-width="0.968421" stroke-dasharray="4.84 8.72"/>
|
||||
<circle cx="185.5" cy="78.0586" r="77.1789" stroke="#ACBDEC" stroke-width="1.64211" stroke-dasharray="8.21 14.78"/>
|
||||
<path d="M194.5 47.0586V175.559L183 167.059L172.5 175.559L163 167.059L153.5 175.559L143.5 167.059L131.5 175.559L123 167.059L113.5 175.559L100 167.059L91.5 175.559L78.5 167.059L70 175.559V9.55859H157L194.5 47.0586Z" fill="#EDF4FC" stroke="#0F62FE"/>
|
||||
<path d="M157 46.5586V9.05859L193.5 46.5586H157Z" fill="#0F62FE"/>
|
||||
<path d="M113.52 103.215V109.174H85.8604L85.4912 104.56L101.496 79.168H107.534L100.995 90.1104L93.0322 103.215H113.52ZM109.169 79.168V117.559H101.575V79.168H109.169ZM143.473 94.9883V101.633C143.473 104.516 143.165 107.003 142.55 109.095C141.935 111.169 141.047 112.874 139.887 114.21C138.744 115.528 137.382 116.504 135.8 117.137C134.218 117.77 132.46 118.086 130.526 118.086C128.979 118.086 127.538 117.893 126.202 117.506C124.866 117.102 123.662 116.478 122.59 115.634C121.535 114.79 120.621 113.727 119.848 112.443C119.092 111.143 118.512 109.596 118.107 107.803C117.703 106.01 117.501 103.953 117.501 101.633V94.9883C117.501 92.1055 117.809 89.6357 118.424 87.5791C119.057 85.5049 119.944 83.8086 121.087 82.4902C122.247 81.1719 123.618 80.2051 125.2 79.5898C126.782 78.957 128.54 78.6406 130.474 78.6406C132.021 78.6406 133.453 78.8428 134.771 79.2471C136.107 79.6338 137.312 80.2402 138.384 81.0664C139.456 81.8926 140.37 82.9561 141.126 84.2568C141.882 85.54 142.462 87.0781 142.866 88.8711C143.271 90.6465 143.473 92.6855 143.473 94.9883ZM135.853 102.635V93.96C135.853 92.5713 135.773 91.3584 135.615 90.3213C135.475 89.2842 135.255 88.4053 134.956 87.6846C134.657 86.9463 134.288 86.3486 133.849 85.8916C133.409 85.4346 132.908 85.1006 132.346 84.8896C131.783 84.6787 131.159 84.5732 130.474 84.5732C129.612 84.5732 128.848 84.7402 128.18 85.0742C127.529 85.4082 126.976 85.9443 126.519 86.6826C126.062 87.4033 125.71 88.3701 125.464 89.583C125.235 90.7783 125.121 92.2373 125.121 93.96V102.635C125.121 104.023 125.191 105.245 125.332 106.3C125.49 107.354 125.719 108.26 126.018 109.016C126.334 109.754 126.703 110.36 127.125 110.835C127.564 111.292 128.065 111.626 128.628 111.837C129.208 112.048 129.841 112.153 130.526 112.153C131.37 112.153 132.117 111.986 132.768 111.652C133.436 111.301 133.998 110.756 134.455 110.018C134.93 109.262 135.281 108.277 135.51 107.064C135.738 105.852 135.853 104.375 135.853 102.635ZM175.535 103.215V109.174H147.876L147.507 104.56L163.512 79.168H169.55L163.011 90.1104L155.048 103.215H175.535ZM171.185 79.168V117.559H163.591V79.168H171.185Z" fill="#040F2D"/>
|
||||
<circle cx="82.5" cy="166.559" r="24.678" stroke="#1339A6" stroke-width="6.64407"/>
|
||||
<path d="M97.8438 190.094L104.304 183.827L131.806 212.18C133.536 213.964 133.493 216.813 131.709 218.543C129.925 220.274 127.076 220.23 125.346 218.447L97.8438 190.094Z" fill="#1339A6"/>
|
||||
<rect x="97.7422" y="190.044" width="9" height="10.4053" transform="rotate(-44.1275 97.7422 190.044)" fill="#0F62FE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
Reference in New Issue
Block a user