CLASSROOMIO-T-193: Exercise Templates for HTML

CLASSROOMIO-T-193: Convert to single quotes

CLASSROOMIO-T-193: Resolved Feedbacks

landing page improvement

add spacing on mobile for notes in lms

little bug fixes in lms

CLASSROOMIO-T-193: return the array

Simplify template generation

CLASSROOMIO-T-193: Styling improvement

CLASSROOMIO-T-193: Exercise Templates for HTML


Co-authored-by: Rotimi Best <[email protected]>
Co-authored-by: Tunji Adeyemi <[email protected]>


Merge-request: CLASSROOMIO-MR-88
Merged-by: Best Admin <[email protected]>
This commit is contained in:
tunny17
2023-10-06 09:06:03 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent e57bd4a4bf
commit 849154711b
33 changed files with 3159 additions and 147 deletions
+88 -40
View File
@@ -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: []
}
]
}