CLASSROOMIO-T-194: 20 Exercise Templates for CSS
Co-authored-by: Tunji Adeyemi <tunji@digdippa.com> Merge-request: CLASSROOMIO-MR-91 Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
tunny17
@@ -0,0 +1,118 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Syntax Quiz',
|
||||
description: 'Test your knowledge of CSS syntax',
|
||||
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: 'How do you select an HTML element with id="demo" in CSS?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '#demo', is_correct: true },
|
||||
{ label: '.demo', is_correct: false },
|
||||
{ label: 'element="demo"', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you select HTML elements with class="example" in CSS?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '.example', is_correct: true },
|
||||
{ label: '#example', is_correct: false },
|
||||
{ label: 'element="example"', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to change the text color of an element?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'text-color', is_correct: false },
|
||||
{ label: 'color', is_correct: true },
|
||||
{ label: 'font-color', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you add a background color for all <h1> elements?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'h1 {background-color: yellow;}', is_correct: true },
|
||||
{ label: 'h1.background-color: yellow;', is_correct: false },
|
||||
{ label: 'all.h1 {bg-color: yellow;}', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the correct CSS syntax for making all the <p> elements bold?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'p {text-style: bold;}', is_correct: false },
|
||||
{ label: 'p {font-weight: bold;}', is_correct: true },
|
||||
{ label: 'p.bold {text-weight: bold;}', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you add a comment in CSS?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "float" property in CSS?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'Explain the box model in CSS.',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What does CSS specificity refer to?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,118 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Selectors Quiz',
|
||||
description: 'Test your knowledge of CSS selectors',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does the CSS selector "h1" target?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'All <h1> elements', is_correct: true },
|
||||
{ label: 'The first <h1> element', is_correct: false },
|
||||
{ label: 'All elements with class "h1"', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS selector selects all elements with the class "example"?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '.example', is_correct: true },
|
||||
{ label: '#example', is_correct: false },
|
||||
{ label: 'element="example"', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you select all elements inside a <div> element?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<div> { }', is_correct: false },
|
||||
{ label: 'div { }', is_correct: true },
|
||||
{ label: '<div> * { }', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS selector selects elements with the "href" attribute?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '[href]', is_correct: true },
|
||||
{ label: 'href', is_correct: false },
|
||||
{ label: 'element="href"', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you select an element with the id "myID"?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '#myID', is_correct: true },
|
||||
{ label: '.myID', is_correct: false },
|
||||
{ label: 'id="myID"', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What does the CSS selector "p.intro" target?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'All <p> elements with class "intro"', is_correct: true },
|
||||
{ label: 'The first <p> element with class "intro"', is_correct: false },
|
||||
{ label: 'All elements with the id "intro"', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the usage of the universal selector "*" in CSS.',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you select only the first child element of a parent element?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of pseudo-classes in CSS?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the difference between the "descendant" selector and the "child" selector in CSS?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,118 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS How-To Quiz',
|
||||
description: 'Test your knowledge of CSS with these how-to questions',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'How do you include an external CSS file in an HTML document?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<link rel="stylesheet" type="text/css" href="styles.css">', is_correct: true },
|
||||
{ label: '<style src="styles.css">', is_correct: false },
|
||||
{ label: '<css src="styles.css">', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What does CSS stand for?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
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 CSS property is used to change the text color of an element?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'color', is_correct: true },
|
||||
{ label: 'text-color', is_correct: false },
|
||||
{ label: 'font-color', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the correct way to comment out CSS code?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
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: 'How do you apply an inline style to an HTML element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<div style="color: blue;">', is_correct: true },
|
||||
{ label: '<div class="blue">', is_correct: false },
|
||||
{ label: '<div id="blue">', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS selector selects all elements with the class "highlight"?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '.highlight', is_correct: true },
|
||||
{ label: '#highlight', is_correct: false },
|
||||
{ label: 'element="highlight"', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the usage of the CSS "box-sizing" property.',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How do you select all <p> elements that are inside a <div> element?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of CSS pseudo-classes?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the difference between margin and padding in CSS?',
|
||||
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: 'CSS Comments Quiz',
|
||||
description: 'Test your knowledge of CSS comments',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the correct way to add a CSS comment?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '/* This is a CSS comment */', is_correct: true },
|
||||
{ label: '// This is a CSS comment', is_correct: false },
|
||||
{ label: '<!-- This is a CSS comment -->', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Can you add multiline comments in CSS?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Yes, using /* */', is_correct: true },
|
||||
{ label: 'No, CSS only supports single-line comments', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of CSS comments?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To provide explanations and notes within the code', is_correct: true },
|
||||
{ label: 'To disable specific styles temporarily', is_correct: false },
|
||||
{ label: 'To hide styles from the browser', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is NOT a valid way to add a CSS comment?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<!-- This is a CSS comment -->', is_correct: true },
|
||||
{ label: '// This is a CSS comment', is_correct: false },
|
||||
{ label: '/* This is a CSS comment */', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the use of CSS comments in improving code readability.',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'When might you use CSS comments to organize your styles?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS selector should you use to select all elements with a specific class?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '.classname', is_correct: true },
|
||||
{ label: '#classname', is_correct: false },
|
||||
{ label: 'elementname', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you add a CSS comment using the "style" attribute in HTML?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'style="/* This is a CSS comment */"', is_correct: true },
|
||||
{ label: 'style="// This is a CSS comment"', is_correct: false },
|
||||
{ label: 'style="<!-- This is a CSS comment -->"', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'In CSS, comments are displayed in the rendered web page.',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'True', is_correct: false },
|
||||
{ label: 'False', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the advantages of using CSS comments for code maintenance.',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,126 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Colors Quiz',
|
||||
description: 'Test your knowledge of CSS colors',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to set the background color of an element?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'background-color', is_correct: true },
|
||||
{ label: 'color', is_correct: false },
|
||||
{ label: 'text-color', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you specify a color in CSS using hexadecimal notation?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '#RRGGBB', is_correct: true },
|
||||
{ label: 'rgb(R, G, B)', is_correct: false },
|
||||
{ label: 'color: name;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the text color of an element?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'color', is_correct: true },
|
||||
{ label: 'text-color', is_correct: false },
|
||||
{ label: 'background-color', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the CSS property for setting the transparency of an element?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'opacity', is_correct: true },
|
||||
{ label: 'transparent', is_correct: false },
|
||||
{ label: 'visibility', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which color code represents fully transparent?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'rgba(0, 0, 0, 0)', is_correct: true },
|
||||
{ label: 'rgba(255, 255, 255, 1)', is_correct: false },
|
||||
{ label: 'rgb(0, 0, 0)', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between RGB and hexadecimal color notations in CSS.',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of setting the transparency of an element in CSS?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the color of an element when a user hovers over it?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'hover-color', is_correct: false },
|
||||
{ label: 'color:hover', is_correct: false },
|
||||
{ label: 'color', is_correct: false },
|
||||
{ label: 'hover', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you specify the background color of an element using an RGB value?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'background-color: rgb(R, G, B);', is_correct: true },
|
||||
{ label: 'color: rgb(R, G, B);', is_correct: false },
|
||||
{ label: 'bg-color: rgb(R, G, B);', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Can you use color names to specify colors in CSS?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Yes, using predefined color names', is_correct: true },
|
||||
{ label: 'No, color names are not supported in CSS', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,126 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Background Quiz',
|
||||
description: 'Test your knowledge of CSS backgrounds',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to set the background color of an element?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'background-color', is_correct: true },
|
||||
{ label: 'color', is_correct: false },
|
||||
{ label: 'text-color', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you specify a background image in CSS?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'image-url', is_correct: false },
|
||||
{ label: 'background-image', is_correct: true },
|
||||
{ label: 'img-src', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which property is used to repeat a background image both horizontally and vertically?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'background-repeat', is_correct: true },
|
||||
{ label: 'repeat-both', is_correct: false },
|
||||
{ label: 'background-style', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you make a background image not repeat?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'no-repeat', is_correct: true },
|
||||
{ label: 'background-repeat: none;', is_correct: false },
|
||||
{ label: 'repeat: none;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "background-size" property in CSS?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To set the size of the element', is_correct: false },
|
||||
{ label: 'To control the size of the background image', is_correct: true },
|
||||
{ label: 'To set the font size', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between "background-image" and "background-color" in CSS.',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you add a background color to an element in CSS?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What CSS property is used to specify the position of a background image?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'background-position', is_correct: true },
|
||||
{ label: 'image-position', is_correct: false },
|
||||
{ label: 'position-image', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you set the background image to be fixed (not scrollable) in CSS?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'background-attachment: fixed;', is_correct: true },
|
||||
{ label: 'background-scroll: none;', is_correct: false },
|
||||
{ label: 'background-fixed: true;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Can you apply multiple background images to a single element in CSS?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'No, only one background image is allowed per element', is_correct: false },
|
||||
{ label: 'Yes, using the "background-image" property multiple times', is_correct: false },
|
||||
{ label: 'Yes, using the "background-image" property with a comma-separated list', is_correct: true },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,126 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Border Quiz',
|
||||
description: 'Test your knowledge of CSS borders',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to set the width of a border?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'border-width', is_correct: true },
|
||||
{ label: 'border-size', is_correct: false },
|
||||
{ label: 'border-thickness', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you set the border color in CSS?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'border-color', is_correct: true },
|
||||
{ label: 'color', is_correct: false },
|
||||
{ label: 'border-style', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the "border-style" property in CSS?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'solid', is_correct: false },
|
||||
{ label: 'none', is_correct: false },
|
||||
{ label: 'none (or not specified)', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you create a rounded border in CSS?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'border-round', is_correct: false },
|
||||
{ label: 'border-radius', is_correct: true },
|
||||
{ label: 'rounded-border', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the CSS property used to set the space between the border and the content?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'border-spacing', is_correct: false },
|
||||
{ label: 'padding', is_correct: true },
|
||||
{ label: 'margin', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between "border-width" and "border-style" in CSS.',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you set different border colors for each side of an element in CSS?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "border-collapse" property in CSS?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To collapse table borders', is_correct: true },
|
||||
{ label: 'To add a shadow to borders', is_correct: false },
|
||||
{ label: 'To remove all borders', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you remove the border from an image in CSS?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'border: none;', is_correct: true },
|
||||
{ label: 'border-image: none;', is_correct: false },
|
||||
{ label: 'border-remove: true;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the CSS property used to set the space between the borders of adjacent cells in a table?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'cell-spacing', is_correct: false },
|
||||
{ label: 'border-space', is_correct: false },
|
||||
{ label: 'border-spacing', is_correct: true },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,126 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Margin Quiz',
|
||||
description: 'Test your knowledge of CSS margin properties',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to set the margin on all four sides of an element?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'margin', is_correct: true },
|
||||
{ label: 'margin-all', is_correct: false },
|
||||
{ label: 'margin-sides', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you set the top margin of an element to 20px in CSS?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'margin-top: 20px;', is_correct: true },
|
||||
{ label: 'margin: 20px top;', is_correct: false },
|
||||
{ label: 'margin: top 20px;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the "margin" property in CSS?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '0', is_correct: true },
|
||||
{ label: 'auto', is_correct: false },
|
||||
{ label: '10px', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you center an element horizontally in CSS using margin?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'margin-left: auto; margin-right: auto;', is_correct: true },
|
||||
{ label: 'margin-center: auto;', is_correct: false },
|
||||
{ label: 'margin-horizontal: center;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between "margin" and "padding" in CSS.',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you remove the margin from all sides of an element in CSS?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the CSS property used to set the margin between adjacent table cells?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'cell-spacing', is_correct: false },
|
||||
{ label: 'table-spacing', is_correct: false },
|
||||
{ label: 'border-spacing', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you set different margins for each side of an element in CSS?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'margin-top, margin-right, margin-bottom, margin-left', is_correct: true },
|
||||
{ label: 'margin-all', is_correct: false },
|
||||
{ label: 'margin-sides', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "margin-collapse" property in CSS?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To collapse the margin of adjacent elements', is_correct: true },
|
||||
{ label: 'To increase the margin size', is_correct: false },
|
||||
{ label: 'To hide the margin', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you create a space between two block-level elements in CSS?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Using margin', is_correct: true },
|
||||
{ label: 'Using padding', is_correct: false },
|
||||
{ label: 'Using border', 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: 'CSS Padding Quiz',
|
||||
description: 'Test your knowledge of CSS padding properties',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to set the padding on all four sides of an element?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'padding', is_correct: true },
|
||||
{ label: 'padding-all', is_correct: false },
|
||||
{ label: 'padding-sides', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you set the left padding of an element to 30px in CSS?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'padding-left: 30px;', is_correct: true },
|
||||
{ label: 'padding: 30px left;', is_correct: false },
|
||||
{ label: 'padding: left 30px;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the "padding" property in CSS?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '0', is_correct: true },
|
||||
{ label: 'auto', is_correct: false },
|
||||
{ label: '10px', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you center an element horizontally in CSS using padding?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'padding-left: auto; padding-right: auto;', is_correct: true },
|
||||
{ label: 'padding-center: auto;', is_correct: false },
|
||||
{ label: 'padding-horizontal: center;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between "padding" and "margin" in CSS.',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you remove the padding from all sides of an element in CSS?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the CSS property used to set the padding between the content and border of an element?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'padding-distance', is_correct: false },
|
||||
{ label: 'content-padding', is_correct: false },
|
||||
{ label: 'padding-inline', is_correct: false },
|
||||
{ label: 'padding-inline-start', is_correct: false },
|
||||
{ label: 'padding-block', is_correct: false },
|
||||
{ label: 'padding-block-start', is_correct: false },
|
||||
{ label: 'padding-inline-end', is_correct: false },
|
||||
{ label: 'padding-block-end', is_correct: false },
|
||||
{ label: 'padding-inline-start', is_correct: true },
|
||||
{ label: 'padding-inline-end', is_correct: true },
|
||||
{ label: 'padding-block-start', is_correct: true },
|
||||
{ label: 'padding-block-end', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you set different paddings for each side of an element in CSS?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'padding-top, padding-right, padding-bottom, padding-left', is_correct: true },
|
||||
{ label: 'padding-all', is_correct: false },
|
||||
{ label: 'padding-sides', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "box-sizing" property in CSS related to padding?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To control how the padding is calculated in relation to the element\'s total width and height', is_correct: true },
|
||||
{ label: 'To hide the padding', is_correct: false },
|
||||
{ label: 'To change the color of the padding', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you create space around the content inside an element in CSS?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Using padding', is_correct: true },
|
||||
{ label: 'Using margin', is_correct: false },
|
||||
{ label: 'Using border', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,134 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Dimension Quiz',
|
||||
description: 'Test your knowledge of CSS dimension properties',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to set the height and width of an element?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'size', is_correct: false },
|
||||
{ label: 'dimensions', is_correct: false },
|
||||
{ label: 'height-width', is_correct: false },
|
||||
{ label: 'width-height', is_correct: false },
|
||||
{ label: 'height and width', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you set the height of an element to 100 pixels in CSS?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'height: 100px;', is_correct: true },
|
||||
{ label: 'height: 100;', is_correct: false },
|
||||
{ label: 'height: 100pixels;', is_correct: false },
|
||||
{ label: 'size: 100px;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the "width" property in CSS?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'auto', is_correct: true },
|
||||
{ label: '100%', is_correct: false },
|
||||
{ label: '0', is_correct: false },
|
||||
{ label: '10px', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the CSS property used to set the maximum width of an element?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'max-height', is_correct: false },
|
||||
{ label: 'maximum-width', is_correct: false },
|
||||
{ label: 'max-width', is_correct: true },
|
||||
{ label: 'maximum-height', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the use of the "min-height" and "min-width" properties in CSS.',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How do you set the width of an element to be relative to the width of its containing element?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "box-sizing" property in CSS related to dimensions?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To control how the width and height are calculated in relation to the element\'s total width and height', is_correct: true },
|
||||
{ label: 'To change the background color', is_correct: false },
|
||||
{ label: 'To hide the element', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you create a square element in CSS with equal width and height?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'width: 100%; height: 100%;', is_correct: true },
|
||||
{ label: 'width: 100px; height: 100px;', is_correct: false },
|
||||
{ label: 'width: auto; height: auto;', is_correct: false },
|
||||
{ label: 'width: 1; height: 1;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you set the minimum width and height of an element to be 100 pixels using CSS?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'min-size: 100px;', is_correct: false },
|
||||
{ label: 'min-width: 100px; min-height: 100px;', is_correct: true },
|
||||
{ label: 'minimum-width: 100px; minimum-height: 100px;', is_correct: false },
|
||||
{ label: 'width-min: 100px; height-min: 100px;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the CSS property used to control how an element should be positioned in relation to other elements?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'position', is_correct: true },
|
||||
{ label: 'alignment', is_correct: false },
|
||||
{ label: 'layout', is_correct: false },
|
||||
{ label: 'spacing', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,134 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Box Model Quiz',
|
||||
description: 'Test your knowledge of the CSS Box Model',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does the CSS Box Model describe?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A model for organizing HTML elements', is_correct: false },
|
||||
{ label: 'A model for describing colors in CSS', is_correct: false },
|
||||
{ label: 'A model for calculating the size and spacing of elements in CSS', is_correct: true },
|
||||
{ label: 'A model for creating responsive layouts', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which parts are included in the CSS Box Model?',
|
||||
name: 'q2',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Content', is_correct: true },
|
||||
{ label: 'Padding', is_correct: true },
|
||||
{ label: 'Border', is_correct: true },
|
||||
{ label: 'Margin', is_correct: true },
|
||||
{ label: 'Outline', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the "box-sizing" property in CSS?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'border-box', is_correct: false },
|
||||
{ label: 'content-box', is_correct: true },
|
||||
{ label: 'margin-box', is_correct: false },
|
||||
{ label: 'padding-box', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you calculate the total width of an element in the CSS Box Model?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Width + Padding + Border + Margin', is_correct: true },
|
||||
{ label: 'Width + Padding + Border', is_correct: false },
|
||||
{ label: 'Width + Padding', is_correct: false },
|
||||
{ label: 'Width', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "box-sizing" property in CSS?',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between margin and padding in the CSS Box Model.',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you make an element ignore the margin of its parent element?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'By setting the margin of the child element to "auto"', is_correct: false },
|
||||
{ label: 'By using the "overflow" property', is_correct: false },
|
||||
{ label: 'By setting the margin of the parent element to "auto"', is_correct: false },
|
||||
{ label: 'By using the "position" property', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What happens to the total width of an element when you add padding?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'It increases', is_correct: true },
|
||||
{ label: 'It decreases', is_correct: false },
|
||||
{ label: 'It remains the same', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'In the CSS Box Model, what does the "border-collapse" property control?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'The width of the border', is_correct: false },
|
||||
{ label: 'The spacing between table cells', is_correct: true },
|
||||
{ label: 'The padding of table cells', is_correct: false },
|
||||
{ label: 'The margin of table cells', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the CSS property used to add space around an element?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'margin', is_correct: true },
|
||||
{ label: 'padding', is_correct: false },
|
||||
{ label: 'border', is_correct: false },
|
||||
{ label: 'spacing', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,132 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Outline Quiz',
|
||||
description: 'Test your knowledge of CSS outline properties',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the CSS "outline" property?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To add a shadow to text', is_correct: false },
|
||||
{ label: 'To draw a border around an element outside of the border', is_correct: true },
|
||||
{ label: 'To create a background color', is_correct: false },
|
||||
{ label: 'To change the font size', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default style of the CSS "outline" property?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Dotted', is_correct: false },
|
||||
{ label: 'Solid', is_correct: true },
|
||||
{ label: 'None', is_correct: false },
|
||||
{ label: 'Inset', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which of the following CSS properties is used to set the color of the outline?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'outline-color', is_correct: true },
|
||||
{ label: 'outline-style', is_correct: false },
|
||||
{ label: 'outline-width', is_correct: false },
|
||||
{ label: 'border-color', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you remove the outline from an element in CSS?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'By setting "outline: none;"', is_correct: true },
|
||||
{ label: 'By setting "outline: 0;"', is_correct: false },
|
||||
{ label: 'By setting "outline: transparent;"', is_correct: false },
|
||||
{ label: 'By setting "outline: hidden;"', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "outline-offset" property in CSS?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between "border" and "outline" in CSS.',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What happens when you use the "outline" property on a text element?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'The text becomes bold', is_correct: false },
|
||||
{ label: 'The text is underlined', is_correct: false },
|
||||
{ label: 'The text receives an outline around it', is_correct: true },
|
||||
{ label: 'The text changes color', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'In CSS, can you have multiple outlines on the same element?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Yes', is_correct: true },
|
||||
{ label: 'No', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the CSS property used to control the width of the outline?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'outline-width', is_correct: true },
|
||||
{ label: 'outline-color', is_correct: false },
|
||||
{ label: 'outline-style', is_correct: false },
|
||||
{ label: 'border-width', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the CSS property used to control the style of the outline?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'outline-style', is_correct: true },
|
||||
{ label: 'outline-color', is_correct: false },
|
||||
{ label: 'outline-width', is_correct: false },
|
||||
{ label: 'border-style', 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: 'CSS Text Properties Quiz',
|
||||
description: 'Test your knowledge of CSS text properties',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to set the font family of an element?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'font-family', is_correct: true },
|
||||
{ label: 'font-style', is_correct: false },
|
||||
{ label: 'text-align', is_correct: false },
|
||||
{ label: 'line-height', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the CSS "text-decoration" property?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Underline', is_correct: false },
|
||||
{ label: 'None', is_correct: true },
|
||||
{ label: 'Overline', is_correct: false },
|
||||
{ label: 'Line-through', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to control the spacing between letters in text?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'letter-spacing', is_correct: true },
|
||||
{ label: 'word-spacing', is_correct: false },
|
||||
{ label: 'line-height', is_correct: false },
|
||||
{ label: 'text-transform', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you make text bold in CSS?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'font-weight: bold;', is_correct: true },
|
||||
{ label: 'text-decoration: bold;', is_correct: false },
|
||||
{ label: 'text-weight: bold;', is_correct: false },
|
||||
{ label: 'font-style: bold;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What does the CSS property "text-transform: uppercase;" do?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Converts text to uppercase', is_correct: true },
|
||||
{ label: 'Converts text to lowercase', is_correct: false },
|
||||
{ label: 'Underlines the text', is_correct: false },
|
||||
{ label: 'Strikes through the text', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the usage of the CSS "text-align" property.',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "text-shadow" property in CSS?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Adds a shadow to text', is_correct: true },
|
||||
{ label: 'Changes the font size', is_correct: false },
|
||||
{ label: 'Underlines the text', is_correct: false },
|
||||
{ label: 'Converts text to uppercase', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'In CSS, can you use "font-style: italic;" to make text italic?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Yes', is_correct: true },
|
||||
{ label: 'No', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the color of the text?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'color', is_correct: true },
|
||||
{ label: 'background-color', is_correct: false },
|
||||
{ label: 'text-color', is_correct: false },
|
||||
{ label: 'font-color', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the CSS "line-height" property?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '1', is_correct: false },
|
||||
{ label: 'normal', is_correct: true },
|
||||
{ label: '100%', is_correct: false },
|
||||
{ label: '0', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,139 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Font Properties Quiz',
|
||||
description: 'Test your knowledge of CSS font properties',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to set the font size of an element?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'font-size', is_correct: true },
|
||||
{ label: 'font-style', is_correct: false },
|
||||
{ label: 'text-align', is_correct: false },
|
||||
{ label: 'line-height', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What does the CSS property "font-weight" control?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Font size', is_correct: false },
|
||||
{ label: 'Font style', is_correct: false },
|
||||
{ label: 'Font weight', is_correct: true },
|
||||
{ label: 'Line spacing', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'In CSS, how can you make text italic?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'font-style: italic;', is_correct: true },
|
||||
{ label: 'text-decoration: italic;', is_correct: false },
|
||||
{ label: 'italicize: true;', is_correct: false },
|
||||
{ label: 'font-format: italic;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the font family of an element?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'font-family', is_correct: true },
|
||||
{ label: 'font-type', is_correct: false },
|
||||
{ label: 'font-group', is_correct: false },
|
||||
{ label: 'font-set', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What does the CSS property "text-transform" do?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Converts text to uppercase', is_correct: true },
|
||||
{ label: 'Converts text to lowercase', is_correct: false },
|
||||
{ label: 'Underlines the text', is_correct: false },
|
||||
{ label: 'Strikes through the text', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the usage of the CSS "font-style" property.',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the CSS property "letter-spacing"?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Controls spacing between letters', is_correct: true },
|
||||
{ label: 'Controls line spacing', is_correct: false },
|
||||
{ label: 'Controls word spacing', is_correct: false },
|
||||
{ label: 'Controls font size', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'In CSS, how can you change the color of text?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'color', is_correct: true },
|
||||
{ label: 'text-color', is_correct: false },
|
||||
{ label: 'font-color', is_correct: false },
|
||||
{ label: 'text-style', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the CSS "line-height" property?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '1', is_correct: false },
|
||||
{ label: 'normal', is_correct: true },
|
||||
{ label: '100%', is_correct: false },
|
||||
{ label: '0', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What does the CSS property "text-decoration" control?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Font decoration', is_correct: false },
|
||||
{ label: 'Line spacing', is_correct: false },
|
||||
{ label: 'Text decoration', is_correct: true },
|
||||
{ label: 'Font color', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,139 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Icons Quiz',
|
||||
description: 'Test your knowledge of CSS icons',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is commonly used to display icons in web development?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'icon-style', is_correct: false },
|
||||
{ label: 'image-display', is_correct: false },
|
||||
{ label: 'icon-display', is_correct: false },
|
||||
{ label: 'content', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you change the color of an icon in CSS?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'color', is_correct: true },
|
||||
{ label: 'icon-color', is_correct: false },
|
||||
{ label: 'image-color', is_correct: false },
|
||||
{ label: 'display-color', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What CSS property allows you to add custom icons to elements?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'content', is_correct: false },
|
||||
{ label: 'icon-image', is_correct: false },
|
||||
{ label: 'custom-icon', is_correct: false },
|
||||
{ label: 'background-image', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which value of the CSS "content" property is commonly used for adding icons?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'text', is_correct: false },
|
||||
{ label: 'icon', is_correct: false },
|
||||
{ label: 'url()', is_correct: false },
|
||||
{ label: 'none', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What does the CSS "font-size" property control when dealing with icons?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Icon width', is_correct: true },
|
||||
{ label: 'Icon color', is_correct: false },
|
||||
{ label: 'Icon style', is_correct: false },
|
||||
{ label: 'Icon placement', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain how to use the "before" pseudo-element to add an icon before a text element.',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the CSS property "content" when working with icons?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Defines icon size', is_correct: false },
|
||||
{ label: 'Defines icon color', is_correct: false },
|
||||
{ label: 'Defines icon content', is_correct: true },
|
||||
{ label: 'Defines icon placement', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you align an icon vertically within a container?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'align-vertical', is_correct: false },
|
||||
{ label: 'vertical-align', is_correct: true },
|
||||
{ label: 'icon-align', is_correct: false },
|
||||
{ label: 'content-align', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'In CSS, what is the common way to center-align an icon horizontally?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'text-align', is_correct: false },
|
||||
{ label: 'horizontal-align', is_correct: false },
|
||||
{ label: 'icon-align', is_correct: false },
|
||||
{ label: 'margin: 0 auto;', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you add an external icon library to your web project?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Use the "icon-library" property', is_correct: false },
|
||||
{ label: 'Include a stylesheet link to the library', is_correct: true },
|
||||
{ label: 'Import it in JavaScript', is_correct: false },
|
||||
{ label: 'Download the icons as image files', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,139 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Link Quiz',
|
||||
description: 'Test your knowledge of CSS link styling',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to style the color of visited links?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'visited-link-color', is_correct: false },
|
||||
{ label: 'link-color', is_correct: false },
|
||||
{ label: 'active-link-color', is_correct: false },
|
||||
{ label: 'color', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you style the text decoration of a link to remove underlines?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'text-underline: none;', is_correct: false },
|
||||
{ label: 'text-decoration: none;', is_correct: true },
|
||||
{ label: 'link-decoration: none;', is_correct: false },
|
||||
{ label: 'underline: none;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What CSS property is commonly used to change the link color when hovering over it?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'hover-color', is_correct: false },
|
||||
{ label: 'link-color', is_correct: false },
|
||||
{ label: 'active-color', is_correct: false },
|
||||
{ label: 'hover', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you style the color of an active link?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'active-link-color', is_correct: true },
|
||||
{ label: 'link-active-color', is_correct: false },
|
||||
{ label: 'color-active-link', is_correct: false },
|
||||
{ label: 'color-link-active', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What CSS pseudo-class is used to select links that the user has not visited yet?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: ':visited', is_correct: false },
|
||||
{ label: ':unvisited', is_correct: false },
|
||||
{ label: ':not-visited', is_correct: false },
|
||||
{ label: ':link', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of the "text-decoration" property in CSS link styling.',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you set a specific style for a link when it is being clicked?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: ':hover', is_correct: false },
|
||||
{ label: ':active', is_correct: true },
|
||||
{ label: ':click', is_correct: false },
|
||||
{ label: ':link', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default color for unvisited links in most web browsers?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Red', is_correct: false },
|
||||
{ label: 'Blue', is_correct: true },
|
||||
{ label: 'Green', is_correct: false },
|
||||
{ label: 'Purple', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you style links in a navigation bar to change color when hovered over?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Use JavaScript', is_correct: false },
|
||||
{ label: 'Apply the "hover" pseudo-class', is_correct: true },
|
||||
{ label: 'Use inline CSS', is_correct: false },
|
||||
{ label: 'Change the HTML tag', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What CSS property is used to remove the underline from a link?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'text-decoration', is_correct: true },
|
||||
{ label: 'remove-underline', is_correct: false },
|
||||
{ label: 'link-decoration', is_correct: false },
|
||||
{ label: 'underline: none;', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,140 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS List Quiz',
|
||||
description: 'Test your knowledge of CSS list styling',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to change the bullet style of a list item?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'list-bullet-style', is_correct: false },
|
||||
{ label: 'bullet-style', is_correct: false },
|
||||
{ label: 'list-style-type', is_correct: true },
|
||||
{ label: 'style-type', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you remove the default list-style (bullets) from an unordered list?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'list-decoration: none;', is_correct: false },
|
||||
{ label: 'list-style: none;', is_correct: true },
|
||||
{ label: 'list-remove: bullets;', is_correct: false },
|
||||
{ label: 'remove-list-style: bullets;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the marker (list-item bullet) to an image?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'marker-image', is_correct: false },
|
||||
{ label: 'list-image', is_correct: false },
|
||||
{ label: 'list-marker-image', is_correct: false },
|
||||
{ label: 'list-style-image', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the "list-style-type" property for an unordered list?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'circle', is_correct: false },
|
||||
{ label: 'disc', is_correct: true },
|
||||
{ label: 'square', is_correct: false },
|
||||
{ label: 'none', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of the "list-style" property in CSS list styling.',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you change the marker (bullet) color of a list item?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'marker-color', is_correct: false },
|
||||
{ label: 'bullet-color', is_correct: false },
|
||||
{ label: 'list-item-color', is_correct: false },
|
||||
{ label: 'color', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What CSS property is used to change the marker (bullet) position in a list item?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'list-marker-position', is_correct: false },
|
||||
{ label: 'marker-position', is_correct: false },
|
||||
{ label: 'list-item-marker', is_correct: false },
|
||||
{ label: 'list-style-position', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you add an image as a custom marker for a list item?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Use JavaScript', is_correct: false },
|
||||
{ label: 'Apply the "list-image" property', is_correct: false },
|
||||
{ label: 'Apply the "list-style-image" property', is_correct: true },
|
||||
{ label: 'Change the HTML tag', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What CSS property is used to control the space between the marker and the content of a list item?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'marker-spacing', is_correct: false },
|
||||
{ label: 'list-marker-space', is_correct: false },
|
||||
{ label: 'list-item-spacing', is_correct: false },
|
||||
{ label: 'list-style-position', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you change the style of list items on hover?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Use JavaScript', is_correct: false },
|
||||
{ label: 'Apply the "hover" pseudo-class', is_correct: true },
|
||||
{ label: 'Use inline CSS', is_correct: false },
|
||||
{ label: 'Apply the "active" pseudo-class', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,140 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Table Quiz',
|
||||
description: 'Test your knowledge of CSS table styling',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to set the width of a table border?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'table-width', is_correct: false },
|
||||
{ label: 'border-width', is_correct: true },
|
||||
{ label: 'table-border-width', is_correct: false },
|
||||
{ label: 'width', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you set the background color for a table row?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'row-color', is_correct: false },
|
||||
{ label: 'background-row', is_correct: false },
|
||||
{ label: 'row-background-color', is_correct: false },
|
||||
{ label: 'background-color', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What CSS property is used to remove the spacing between table cells?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'table-spacing', is_correct: false },
|
||||
{ label: 'cell-spacing', is_correct: false },
|
||||
{ label: 'spacing', is_correct: false },
|
||||
{ label: 'border-collapse', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How do you align text to the right within a table cell?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'text-align: right;', is_correct: true },
|
||||
{ label: 'align-text: right;', is_correct: false },
|
||||
{ label: 'text-align: center;', is_correct: false },
|
||||
{ label: 'align-text: center;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of the "border-collapse" property in CSS table styling.',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the "border-collapse" property for a table?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'separate', is_correct: false },
|
||||
{ label: 'collapse', is_correct: true },
|
||||
{ label: 'hidden', is_correct: false },
|
||||
{ label: 'inherit', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you set the width of a table to be a percentage of its containing element?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'table-width: 50%;', is_correct: false },
|
||||
{ label: 'width: 50%;', is_correct: true },
|
||||
{ label: 'table-size: 50%;', is_correct: false },
|
||||
{ label: 'size: 50%;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "table-layout" property in CSS table styling?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To set the table width', is_correct: false },
|
||||
{ label: 'To control the layout algorithm used for the table', is_correct: true },
|
||||
{ label: 'To set the border-collapse value', is_correct: false },
|
||||
{ label: 'To control the spacing between table cells', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you add a border to a table cell?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'cell-border: 1px;', is_correct: false },
|
||||
{ label: 'border-cell: 1px;', is_correct: false },
|
||||
{ label: 'border: 1px solid;', is_correct: true },
|
||||
{ label: 'table-cell-border: 1px;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you center-align a table on a web page?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'align: center;', is_correct: false },
|
||||
{ label: 'text-align: center;', is_correct: false },
|
||||
{ label: 'center-align: true;', is_correct: false },
|
||||
{ label: 'margin: 0 auto;', is_correct: true },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,129 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Display and Visibility Quiz',
|
||||
description: 'Test your knowledge of CSS display and visibility properties',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which CSS property is used to hide an element without affecting the layout of the page?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'display: none;', is_correct: true },
|
||||
{ label: 'visibility: hidden;', is_correct: false },
|
||||
{ label: 'opacity: 0;', is_correct: false },
|
||||
{ label: 'position: absolute;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the "display" property for most HTML elements?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'block', is_correct: false },
|
||||
{ label: 'inline', is_correct: false },
|
||||
{ label: 'none', is_correct: false },
|
||||
{ label: 'initial', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you make an element take up the full width of its parent container?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'width: 100%;', is_correct: true },
|
||||
{ label: 'width: auto;', is_correct: false },
|
||||
{ label: 'width: inherit;', is_correct: false },
|
||||
{ label: 'width: initial;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to hide an element but still occupy space in the layout?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'display: none;', is_correct: false },
|
||||
{ label: 'visibility: hidden;', is_correct: true },
|
||||
{ label: 'opacity: 0;', is_correct: false },
|
||||
{ label: 'position: absolute;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "visibility" property in CSS?',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you change an element from "inline" to "block" using CSS?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'display: inline;', is_correct: false },
|
||||
{ label: 'display: block;', is_correct: true },
|
||||
{ label: 'display: inline-block;', is_correct: false },
|
||||
{ label: 'display: initial;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "display: inline-block;" property value in CSS?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you make an element invisible to the screen reader while still rendering it on the page?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'visibility: hidden;', is_correct: false },
|
||||
{ label: 'display: none;', is_correct: false },
|
||||
{ label: 'opacity: 0;', is_correct: false },
|
||||
{ label: 'position: absolute;', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "position: absolute;" property value in CSS?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you center-align an element horizontally using CSS?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'text-align: center;', is_correct: false },
|
||||
{ label: 'margin: 0 auto;', is_correct: true },
|
||||
{ label: 'align: center;', is_correct: false },
|
||||
{ label: 'position: center;', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,120 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'CSS Max-Width Quiz',
|
||||
description: 'Test your knowledge of CSS max-width property',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the CSS "max-width" property?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the maximum width of an element?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'max-height', is_correct: false },
|
||||
{ label: 'min-width', is_correct: false },
|
||||
{ label: 'width', is_correct: false },
|
||||
{ label: 'max-width', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the "max-width" property?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'auto', is_correct: true },
|
||||
{ label: '100%', is_correct: false },
|
||||
{ label: '0', is_correct: false },
|
||||
{ label: 'none', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'How can you make sure an image never exceeds a specified width?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'max-width: 100%;', is_correct: true },
|
||||
{ label: 'max-width: none;', is_correct: false },
|
||||
{ label: 'max-width: auto;', is_correct: false },
|
||||
{ label: 'max-width: inherit;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the effect of setting "max-width" to "none"?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'When should you use the "max-width" property in CSS?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the maximum width of an image?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'image-max-width', is_correct: false },
|
||||
{ label: 'img-width', is_correct: false },
|
||||
{ label: 'width-max', is_correct: false },
|
||||
{ label: 'max-width', is_correct: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What happens if the content of an element exceeds its "max-width"?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
title: 'How can you center-align a block-level element with a maximum width?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'text-align: center;', is_correct: false },
|
||||
{ label: 'margin: 0 auto;', is_correct: true },
|
||||
{ label: 'align: center;', is_correct: false },
|
||||
{ label: 'position: center;', is_correct: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'What is the syntax for setting a specific maximum width in CSS using "max-width"?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: [],
|
||||
}
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
export default template;
|
||||
@@ -0,0 +1,66 @@
|
||||
import cssSyntax from './001_css_syntax';
|
||||
import cssSelectors from './002_css_selectors';
|
||||
import cssHowTo from './003_css_howTo';
|
||||
import cssComments from './004_css_comments';
|
||||
import cssColors from './005_css_colors';
|
||||
import cssBackgounds from './006_css_backgrounds';
|
||||
import cssBorders from './007_css_borders';
|
||||
import cssMargin from './008_css_margin';
|
||||
import cssPadding from './009_css_padding'
|
||||
import cssDimensions from './010_css_dimentions';
|
||||
import cssBoxModel from './011_css_boxModel';
|
||||
import cssOutline from './012_css_outline';
|
||||
import cssText from './013_css_text';
|
||||
import cssFonts from './014_css_fonts';
|
||||
import cssIcons from './015_css_icons';
|
||||
import cssLinks from './016_css_links';
|
||||
import cssLists from './017_css_lists';
|
||||
import cssTables from './018_css_tables';
|
||||
import cssDisplay from './019_css_display';
|
||||
import cssMaxWidth from './020_css_maxWidth';
|
||||
|
||||
export const CSS_IDS: { [key: string]: string } = {
|
||||
CSS_SYNTAX: 'CSS_SYNTAX',
|
||||
CSS_SELECTORS: 'CSS_SELECTORS',
|
||||
CSS_HOWTO: 'CSS_HOWTO',
|
||||
CSS_COMMENTS: 'CSS_COMMENTS',
|
||||
CSS_COLORS: 'CSS_COLORS',
|
||||
CSS_BACKGROUNDS: 'CSS_BACKGROUNDS',
|
||||
CSS_BORDERS: 'CSS_BORDERS',
|
||||
CSS_MARGIN: 'CSS_MARGIN',
|
||||
CSS_PADDING: 'CSS_PADDING',
|
||||
CSS_DIMENTIONS: 'CSS_DIMENTIONS',
|
||||
CSS_BOXMODEL: 'CSS_BOXMODEL',
|
||||
CSS_OUTLINE: 'CSS_OUTLINE',
|
||||
CSS_TEXT: 'CSS_TEXT',
|
||||
CSS_FONTS: 'CSS_FONTS',
|
||||
CSS_ICONS: 'CSS_ICONS',
|
||||
CSS_LINKS: 'CSS_LINKS',
|
||||
CSS_LISTS: 'CSS_LISTS',
|
||||
CSS_TABLES: 'CSS_TABLES',
|
||||
CSS_DISPLAY: 'CSS_DISPLAY',
|
||||
CSS_MAXWIDTH: 'CSS_MAXWIDTH',
|
||||
};
|
||||
|
||||
export const CSS_TEMPLATES = {
|
||||
[CSS_IDS.CSS_SYNTAX]: cssSyntax,
|
||||
[CSS_IDS.CSS_SELECTORS]: cssSelectors,
|
||||
[CSS_IDS.CSS_HOWTO]: cssHowTo,
|
||||
[CSS_IDS.CSS_COMMENTS]: cssComments,
|
||||
[CSS_IDS.CSS_COLORS]: cssColors,
|
||||
[CSS_IDS.CSS_BACKGROUNDS]: cssBackgounds,
|
||||
[CSS_IDS.CSS_BORDERS]: cssBorders,
|
||||
[CSS_IDS.CSS_MARGIN]: cssMargin,
|
||||
[CSS_IDS.CSS_PADDING]: cssPadding,
|
||||
[CSS_IDS.CSS_DIMENTIONS]: cssDimensions,
|
||||
[CSS_IDS.CSS_BOXMODEL]: cssBoxModel,
|
||||
[CSS_IDS.CSS_OUTLINE]: cssOutline,
|
||||
[CSS_IDS.CSS_TEXT]: cssText,
|
||||
[CSS_IDS.CSS_FONTS]: cssFonts,
|
||||
[CSS_IDS.CSS_ICONS]: cssIcons,
|
||||
[CSS_IDS.CSS_LINKS]: cssLinks,
|
||||
[CSS_IDS.CSS_LISTS]: cssLists,
|
||||
[CSS_IDS.CSS_TABLES]: cssTables,
|
||||
[CSS_IDS.CSS_DISPLAY]: cssDisplay,
|
||||
[CSS_IDS.CSS_MAXWIDTH]: cssMaxWidth,
|
||||
};
|
||||
@@ -1,4 +1,5 @@
|
||||
import { HTML_IDS, HTML_TEMPLATES } from './html';
|
||||
import { CSS_IDS, CSS_TEMPLATES } from './css';
|
||||
import { calculateTotalPoints } from './utils';
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
@@ -35,7 +36,7 @@ function generateTemplateForTag(
|
||||
|
||||
export const TEMPLATES = {
|
||||
[TAGS.HTML]: generateTemplateForTag(HTML_IDS, HTML_TEMPLATES),
|
||||
[TAGS.CSS]: [],
|
||||
[TAGS.CSS]: generateTemplateForTag(CSS_IDS, CSS_TEMPLATES),
|
||||
[TAGS.JS]: [],
|
||||
[TAGS.Typescript]: [],
|
||||
[TAGS.ReactJS]: [],
|
||||
|
||||
Reference in New Issue
Block a user