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 />
|
||||
|
||||
Reference in New Issue
Block a user