CLASSROOMIO-T-190: Templates v1
This commit is contained in:
Rotimi Best
@@ -0,0 +1,71 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Elements Quiz',
|
||||
description: 'Test your knowledge of HTML elements.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does the <p> element stand for?',
|
||||
name: 'p_element',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Paragraph', is_correct: true },
|
||||
{ label: 'Page', is_correct: false },
|
||||
{ label: 'Preformatted', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML element is used for creating an unordered list?',
|
||||
name: 'ul_element',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<ul>', is_correct: true },
|
||||
{ label: '<ol>', is_correct: false },
|
||||
{ label: '<li>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the <a> element do?',
|
||||
name: 'a_element',
|
||||
points: 2,
|
||||
order: 3,
|
||||
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 }
|
||||
]
|
||||
},
|
||||
{
|
||||
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,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,71 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Attributes Quiz',
|
||||
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,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'class', is_correct: false },
|
||||
{ label: 'style', is_correct: true },
|
||||
{ label: 'src', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'href' attribute in the <a> element?",
|
||||
name: 'href_attribute',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to specify an alternate text for an image?',
|
||||
name: 'alt_attribute',
|
||||
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 }
|
||||
]
|
||||
},
|
||||
{
|
||||
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 attribute is used to specify the URL of a linked resource?',
|
||||
name: 'href_attribute2',
|
||||
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 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,16 @@
|
||||
import htmlElements from './001_html_elements';
|
||||
import htmlAttributes from './002_html_attributes';
|
||||
|
||||
export const HTML_IDS = {
|
||||
HTML_ELEMENTS: 'HTML_ELEMENTS',
|
||||
HTML_ATTRIBUTES: 'HTML_ATTRIBUTES',
|
||||
HTML_HEADINGS: 'HTML_HEADINGS',
|
||||
HTML_PARAGRAPH: 'HTML_PARAGRAPH'
|
||||
};
|
||||
|
||||
export const HTML_TEMPLATES = {
|
||||
[HTML_IDS.HTML_ELEMENTS]: htmlElements,
|
||||
[HTML_IDS.HTML_ATTRIBUTES]: htmlAttributes,
|
||||
[HTML_IDS.HTML_HEADINGS]: htmlElements,
|
||||
[HTML_IDS.HTML_PARAGRAPH]: htmlElements
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
import { HTML_IDS, HTML_TEMPLATES } from './html';
|
||||
|
||||
export const TAGS = {
|
||||
HTML: 'HTML',
|
||||
CSS: 'CSS',
|
||||
JS: 'JS',
|
||||
Typescript: 'Typescript',
|
||||
ReactJS: 'ReactJS',
|
||||
VueJS: 'VueJS'
|
||||
};
|
||||
|
||||
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.CSS]: [],
|
||||
[TAGS.JS]: [],
|
||||
[TAGS.Typescript]: [],
|
||||
[TAGS.ReactJS]: [],
|
||||
[TAGS.VueJS]: []
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import type { CustomQuestionType } from '$lib/utils/types';
|
||||
|
||||
export const QuestionTypes: CustomQuestionType[] = [
|
||||
{
|
||||
id: 1,
|
||||
label: 'RADIO'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'CHECKBOX'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'TEXTAREA'
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user