feat: mock exercise template api (#613)
* feat: move mock exercise template to api * feat: add template migration file * chore: - remove exercise templates form api - rework api to pull exercise templates from db - add exercise template seed to seed file - declutter seed file * chore: - refactor template fetch to be dependent on the selected tag - add tag to schema, remote db and template's seed file - clear remote db's template table and replace data and their respective tags * chore: add number of questions and center loading screen on the frontend * chore: pr fixes * chore: type fixes * chore: - move seed functionality to /seed folder - add typing for individual seed functions - pr fixes * chore: pr fixes v2 * update output css * refactor: update seeding script and schema definitions - Renamed `seedTypes` to `seedQuestionTypes` for clarity in the seeding process. - Enhanced the seeding script to include a command-line interface for better usability, allowing specific seed functions to be executed based on flags. - Removed redundant unique constraints in the schema definitions for `courseNewsfeedComment` and `exerciseTemplate` to streamline database structure. * feat: add email verification error handling page and update session management - Introduced a new page for handling email verification errors, providing user-friendly messages based on error types. - Updated session management logic to improve handling of public routes and session states. - Enhanced security policies in the Svelte configuration to include additional sources for styles and scripts. - Removed the old email verification error page to streamline the codebase. * move the exercise template to cloudflare cdn --------- Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Adeyemi Adetunji
co-authored by
Rotimi Best
Rotimi Best
parent
ac3f35a97f
commit
50d6ee3111
+34
-23
@@ -821,6 +821,7 @@ import { authOrApiKeyMiddleware } from '@api/middlewares/auth-or-api-key';
|
||||
```
|
||||
|
||||
**API Key Authentication:**
|
||||
|
||||
- Add `API_KEY` to `apps/api/src/config/env.ts` environment schema
|
||||
- Use `Authorization: Bearer <api-key>` header format (standard across popular APIs)
|
||||
- Use `apiKeyMiddleware` for API-key-only endpoints
|
||||
@@ -1100,7 +1101,7 @@ export const app = new Hono().route('/account', accountRouter); // Route availab
|
||||
### Step 5: Run the api build command (at the root directory)
|
||||
|
||||
```
|
||||
sudo pnpm --filter @cio/api build
|
||||
pnpm --filter @cio/api build
|
||||
```
|
||||
|
||||
---
|
||||
@@ -1219,12 +1220,7 @@ export async function createOrg(profileId: string, data: { name: string; siteNam
|
||||
// Business Logic: Check sitename availability
|
||||
const exists = await checkSiteNameExists(data.siteName);
|
||||
if (exists) {
|
||||
throw new AppError(
|
||||
`Site name '${data.siteName}' already exists`,
|
||||
ErrorCodes.SITENAME_EXISTS,
|
||||
409,
|
||||
'siteName'
|
||||
);
|
||||
throw new AppError(`Site name '${data.siteName}' already exists`, ErrorCodes.SITENAME_EXISTS, 409, 'siteName');
|
||||
}
|
||||
|
||||
// Business Logic: Create org and member in a transaction
|
||||
@@ -1256,12 +1252,7 @@ export async function createOrg(profileId: string, data: { name: string; siteNam
|
||||
} catch (error) {
|
||||
// Handle database constraint violations
|
||||
if (error.code === '23505') {
|
||||
throw new AppError(
|
||||
`Site name '${data.siteName}' already exists`,
|
||||
ErrorCodes.SITENAME_EXISTS,
|
||||
409,
|
||||
'siteName'
|
||||
);
|
||||
throw new AppError(`Site name '${data.siteName}' already exists`, ErrorCodes.SITENAME_EXISTS, 409, 'siteName');
|
||||
}
|
||||
throw new AppError('Failed to create organization', ErrorCodes.ORG_CREATE_FAILED, 500);
|
||||
}
|
||||
@@ -1282,8 +1273,11 @@ import { authMiddleware } from '@api/middlewares/auth';
|
||||
import { handleError } from '@api/utils/errors';
|
||||
import { zValidator } from '@hono/zod-validator';
|
||||
|
||||
export const organizationRouter = new Hono()
|
||||
.post('/', authMiddleware, zValidator('json', ZCreateOrganization), async (c) => {
|
||||
export const organizationRouter = new Hono().post(
|
||||
'/',
|
||||
authMiddleware,
|
||||
zValidator('json', ZCreateOrganization),
|
||||
async (c) => {
|
||||
try {
|
||||
const user = c.get('user');
|
||||
const data = c.req.valid('json');
|
||||
@@ -1294,7 +1288,8 @@ export const organizationRouter = new Hono()
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to create organization');
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
**Note**: Use `201 Created` status code for successful POST requests that create resources.
|
||||
@@ -1310,8 +1305,7 @@ export * from './organization';
|
||||
// apps/api/src/app.ts
|
||||
import { organizationRouter } from '@api/routes/organization';
|
||||
|
||||
export const app = new Hono()
|
||||
.route('/organization', organizationRouter); // Route available at POST /organization
|
||||
export const app = new Hono().route('/organization', organizationRouter); // Route available at POST /organization
|
||||
```
|
||||
|
||||
---
|
||||
@@ -1373,6 +1367,7 @@ export const orgApi = new OrgApi();
|
||||
```
|
||||
|
||||
**Key Points:**
|
||||
|
||||
- Use `this.execute()` from `BaseApiWithErrors` for automatic loading/error state
|
||||
- Field-specific errors are automatically mapped to `this.errors[field]`
|
||||
- Update stores in `onSuccess` callback
|
||||
@@ -1385,11 +1380,13 @@ export const orgApi = new OrgApi();
|
||||
Sometimes a service function exists in a different context (e.g., `createOrganizationWithOwner` in onboarding service).
|
||||
|
||||
**When to Reuse:**
|
||||
|
||||
- ✅ The function does exactly what you need
|
||||
- ✅ It's in the same domain (organization operations)
|
||||
- ✅ You can call it from your new route without modification
|
||||
|
||||
**When to Create New:**
|
||||
|
||||
- ❌ The existing function has domain-specific logic you don't want (e.g., onboarding-specific)
|
||||
- ❌ You need different parameters or return values
|
||||
- ❌ The function is in a different domain and mixing concerns would be inappropriate
|
||||
@@ -1455,18 +1452,17 @@ When you have existing components using direct Supabase calls, follow this migra
|
||||
#### Step 1: Identify the Operation
|
||||
|
||||
Analyze the existing Supabase call:
|
||||
|
||||
- **What database operation?** (CREATE, UPDATE, DELETE, SELECT)
|
||||
- **What tables are involved?**
|
||||
- **Are there related operations?** (e.g., create org + create member should be atomic)
|
||||
- **What validation is currently done?** (client-side only or also server-side?)
|
||||
|
||||
**Example Analysis:**
|
||||
|
||||
```typescript
|
||||
// Current code
|
||||
const { data: org, error } = await supabase
|
||||
.from('organization')
|
||||
.insert({ name: orgName, siteName: siteName })
|
||||
.select();
|
||||
const { data: org, error } = await supabase.from('organization').insert({ name: orgName, siteName: siteName }).select();
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('organizationmember')
|
||||
@@ -1482,21 +1478,25 @@ const { data, error } = await supabase
|
||||
#### Step 2: Check for Existing Services
|
||||
|
||||
Search for existing service functions that might handle this:
|
||||
|
||||
- Check `apps/api/src/services/` for similar operations
|
||||
- Look in related domains (e.g., onboarding might have org creation)
|
||||
- Check if the operation exists but in a different context
|
||||
|
||||
**Decision:**
|
||||
|
||||
- **Reuse existing service** if it does what you need
|
||||
- **Create new service** if you need different logic or parameters
|
||||
|
||||
#### Step 3: Create/Update API Route
|
||||
|
||||
If the route doesn't exist:
|
||||
|
||||
- Follow the "Creating a New Route" workflow above
|
||||
- Use appropriate HTTP method: `POST` (create), `PUT` (update), `DELETE` (delete)
|
||||
|
||||
If the route exists:
|
||||
|
||||
- Add new endpoint to existing router
|
||||
- Follow route naming conventions (see [`apps/api/ROUTE_NAMING_BEST_PRACTICES.md`](apps/api/ROUTE_NAMING_BEST_PRACTICES.md))
|
||||
|
||||
@@ -1542,6 +1542,7 @@ class OrgApi extends BaseApiWithErrors {
|
||||
```
|
||||
|
||||
**Key Points:**
|
||||
|
||||
- Always use `this.execute()` from `BaseApiWithErrors`
|
||||
- Client-side validation before API call
|
||||
- Update stores in `onSuccess` callback
|
||||
@@ -1552,6 +1553,7 @@ class OrgApi extends BaseApiWithErrors {
|
||||
Replace Supabase calls with API class method:
|
||||
|
||||
**Before (Direct Supabase):**
|
||||
|
||||
```typescript
|
||||
<script lang="ts">
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
@@ -1594,6 +1596,7 @@ Replace Supabase calls with API class method:
|
||||
```
|
||||
|
||||
**After (API Route):**
|
||||
|
||||
```typescript
|
||||
<script lang="ts">
|
||||
import { orgApi } from '$features/org/api/org.svelte';
|
||||
@@ -1627,6 +1630,7 @@ Replace Supabase calls with API class method:
|
||||
```
|
||||
|
||||
**Key Differences:**
|
||||
|
||||
- ✅ **No manual transaction cleanup** - Handled by service layer
|
||||
- ✅ **No separate member creation** - Handled atomically by service
|
||||
- ✅ **Automatic store updates** - Handled by API class `onSuccess`
|
||||
@@ -1639,6 +1643,7 @@ Replace Supabase calls with API class method:
|
||||
The `BaseApiWithErrors` class automatically maps field-specific errors from the API response:
|
||||
|
||||
**API Response Structure:**
|
||||
|
||||
```typescript
|
||||
// Field-specific error
|
||||
{
|
||||
@@ -1658,6 +1663,7 @@ The `BaseApiWithErrors` class automatically maps field-specific errors from the
|
||||
```
|
||||
|
||||
**In Component:**
|
||||
|
||||
```typescript
|
||||
await orgApi.create({ name: orgName, siteName });
|
||||
|
||||
@@ -1675,6 +1681,7 @@ if (!orgApi.success) {
|
||||
```
|
||||
|
||||
**How It Works:**
|
||||
|
||||
1. API returns error with `field` property
|
||||
2. `BaseApiWithErrors.execute()` automatically sets `this.errors[field] = error`
|
||||
3. Component can access `orgApi.errors.fieldName` directly
|
||||
@@ -1732,7 +1739,7 @@ export const app = new Hono()
|
||||
### Step 5: Run the api build command (at the root directory)
|
||||
|
||||
```
|
||||
sudo pnpm --filter @cio/api build
|
||||
pnpm --filter @cio/api build
|
||||
```
|
||||
|
||||
---
|
||||
@@ -2117,6 +2124,7 @@ export const communityApi = new CommunityApi();
|
||||
#### Using the `execute` Method
|
||||
|
||||
**Pattern:**
|
||||
|
||||
```typescript
|
||||
import { BaseApiWithErrors, classroomio } from '$lib/utils/services/api';
|
||||
import { ZItemUpdate } from '@cio/utils/validation/items';
|
||||
@@ -2177,6 +2185,7 @@ export const itemApi = new ItemApi();
|
||||
```
|
||||
|
||||
**Key Points:**
|
||||
|
||||
- **Always use `this.execute`** - Never call the RPC client directly
|
||||
- **Always validate first** - Use Zod's `safeParse()` before API call
|
||||
- **Type the execute call** with `typeof classroomio.{route}.{method}` for type safety
|
||||
@@ -2187,6 +2196,7 @@ export const itemApi = new ItemApi();
|
||||
- **Return early on validation failure** - Don't make API call if validation fails
|
||||
|
||||
**Benefits:**
|
||||
|
||||
- ✅ Automatic loading state management (`this.isLoading`)
|
||||
- ✅ Automatic error state management (`this.error` or `this.errors`)
|
||||
- ✅ Consistent error handling across all API calls
|
||||
@@ -2326,6 +2336,7 @@ const result = await OrgPlanApiServer.createOrgPlan(planData);
|
||||
4. Create `.server.ts` files with static methods that use `getApiKeyHeaders()` helper
|
||||
|
||||
**Helper Function**: Use `getApiKeyHeaders()` from `$lib/utils/services/api/server` to get API key headers. This helper:
|
||||
|
||||
- Returns the correct headers format for RPC client
|
||||
- Validates that `API_KEY` is configured
|
||||
- Provides consistent API key authentication across all server-side files
|
||||
|
||||
@@ -17,6 +17,7 @@ import { dashAnalyticsRouter } from '@api/routes/dash';
|
||||
import { mediaRouter } from '@api/routes/media';
|
||||
import { onboardingRouter } from '@api/routes/onboarding';
|
||||
import { organizationRouter } from '@api/routes/organization';
|
||||
import { exerciseRouter } from '@api/routes/exercise';
|
||||
import { communityRouter } from '@api/routes/community';
|
||||
|
||||
// Create Hono app with chaining for RPC support
|
||||
@@ -78,6 +79,7 @@ export const app = new Hono()
|
||||
.route('/media', mediaRouter)
|
||||
.route('/organization', organizationRouter)
|
||||
.route('/dash', dashAnalyticsRouter)
|
||||
.route('/exercise', exerciseRouter)
|
||||
.route('/community', communityRouter)
|
||||
|
||||
// Error handling
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from './template';
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Hono } from '@api/utils/hono';
|
||||
import { authMiddleware } from '@api/middlewares/auth';
|
||||
import { ZTemplateById, ZTemplateByTag } from '@cio/utils/validation/mocks';
|
||||
|
||||
import { handleError } from '@api/utils/errors';
|
||||
import { zValidator } from '@hono/zod-validator';
|
||||
import { fetchAllTemplatesMetadata, fetchTemplateById, fetchTemplatesByTag } from '@api/services/exercise/template';
|
||||
|
||||
export const exerciseRouter = new Hono()
|
||||
.get('/template', authMiddleware, async (c) => {
|
||||
try {
|
||||
const result = await fetchAllTemplatesMetadata();
|
||||
|
||||
return c.json({ success: true, data: result }, 200);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to load template metadata');
|
||||
}
|
||||
})
|
||||
.get('/template/:id', authMiddleware, zValidator('param', ZTemplateById), async (c) => {
|
||||
try {
|
||||
const { id } = c.req.valid('param');
|
||||
|
||||
const result = await fetchTemplateById(id);
|
||||
return c.json({ success: true, data: result }, 200);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to load template');
|
||||
}
|
||||
})
|
||||
.get('/template/tag/:tag', authMiddleware, zValidator('param', ZTemplateByTag), async (c) => {
|
||||
try {
|
||||
const { tag } = c.req.valid('param');
|
||||
|
||||
const result = await fetchTemplatesByTag(tag);
|
||||
return c.json({ success: true, data: result }, 200);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to load template');
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
import { calculateTotalPoints } from '@api/utils/template';
|
||||
import { getAllTemplates, getTemplateById, getTemplateByTag } from '@db/queries/template/template';
|
||||
import { TNewExerciseTemplate, TExerciseTemplate } from '@db/types';
|
||||
|
||||
function mapTemplateToMetadata(templates: TNewExerciseTemplate[]) {
|
||||
return templates.map((template) => {
|
||||
const questionnaire = template.questionnaire;
|
||||
|
||||
return {
|
||||
id: template.id,
|
||||
title: template.title,
|
||||
description: template.description,
|
||||
questions: questionnaire.questions.length,
|
||||
points: calculateTotalPoints(template),
|
||||
tag: template.tag
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export async function fetchAllTemplatesMetadata() {
|
||||
let templates: TExerciseTemplate[];
|
||||
try {
|
||||
templates = await getAllTemplates();
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch templates from DB:', error);
|
||||
throw error;
|
||||
}
|
||||
|
||||
return mapTemplateToMetadata(templates);
|
||||
}
|
||||
|
||||
export async function fetchTemplateById(id: number): Promise<TExerciseTemplate> {
|
||||
let template: TExerciseTemplate;
|
||||
try {
|
||||
template = await getTemplateById(id);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch template from DB:', error);
|
||||
throw error;
|
||||
}
|
||||
|
||||
return template;
|
||||
}
|
||||
|
||||
export async function fetchTemplatesByTag(tag: string) {
|
||||
let templates: TNewExerciseTemplate[];
|
||||
try {
|
||||
templates = await getTemplateByTag(tag);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch templates from DB:', error);
|
||||
throw error;
|
||||
}
|
||||
|
||||
return mapTemplateToMetadata(templates);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { TNewExerciseTemplate } from '@db/types';
|
||||
|
||||
export function calculateTotalPoints(template: TNewExerciseTemplate): number {
|
||||
let totalPoints = 0;
|
||||
|
||||
template.questionnaire.questions.forEach((question) => {
|
||||
totalPoints += question.points;
|
||||
});
|
||||
|
||||
return totalPoints;
|
||||
}
|
||||
+58
-34
@@ -1,16 +1,17 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
|
||||
import { Skeleton } from '@cio/ui/base/skeleton';
|
||||
import * as Dialog from '@cio/ui/base/dialog';
|
||||
import { Confetti, ComingSoon } from '$features/ui';
|
||||
import { InputField } from '@cio/ui/custom/input-field';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { CircleCheckIcon } from '$features/ui/icons';
|
||||
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { exerciseTemplateApi } from '$features/exercise-template/api';
|
||||
import { snackbar } from '$features/ui/snackbar/store';
|
||||
import { Confetti, ComingSoon } from '$features/ui';
|
||||
import { CircleCheckIcon } from '$features/ui/icons';
|
||||
import { TAGS } from '$features/exercise-template/utils/constants';
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
import { type GeneratedTemplates, getAllTemplates, TAGS } from '$lib/mocks';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
@@ -64,7 +65,6 @@
|
||||
// let optionNumber = $state(5);
|
||||
let isLoading = $state(false);
|
||||
let isAIStarted = $state(false);
|
||||
let allTemplates: GeneratedTemplates | undefined = $state();
|
||||
|
||||
let selectedTag = $state(tags[0]);
|
||||
let selectedTemplateId = $state('');
|
||||
@@ -110,9 +110,32 @@
|
||||
// }, 500);
|
||||
// }
|
||||
|
||||
onMount(async () => {
|
||||
allTemplates = await getAllTemplates();
|
||||
});
|
||||
async function handleTemplateSelection() {
|
||||
isTemplateFinishedLoading = true;
|
||||
const template = exerciseTemplateApi.templates?.find((t) => t.id === Number(selectedTemplateId));
|
||||
|
||||
if (!template) return;
|
||||
|
||||
let fetchedTemplate: ExerciseTemplate;
|
||||
|
||||
try {
|
||||
await exerciseTemplateApi.fetchTemplateById(template.id);
|
||||
fetchedTemplate = exerciseTemplateApi.template[0];
|
||||
console.log('Fetched template', fetchedTemplate);
|
||||
await handleTemplateCreate(fetchedTemplate);
|
||||
} catch (error) {
|
||||
console.log('Error fetching template', error);
|
||||
snackbar.error($t('course.navItem.lessons.exercises.new_exercise_modal.errors.template_fetch'));
|
||||
} finally {
|
||||
isTemplateFinishedLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
const handleTagSelection = async (tag: string) => {
|
||||
selectedTag = tag;
|
||||
selectedTemplateId = '';
|
||||
await exerciseTemplateApi.fetchTemplatesByTag(selectedTag);
|
||||
};
|
||||
|
||||
// const content = $derived(
|
||||
// lessonFallbackNote(
|
||||
@@ -146,7 +169,7 @@
|
||||
<div class="my-8 flex justify-between gap-2">
|
||||
{#each options as option}
|
||||
<button
|
||||
class="h-[240px] w-[261px] rounded-md border-2 p-5 dark:bg-neutral-700 {option.type === type
|
||||
class="h-60 w-[261px] rounded-md border-2 p-5 dark:bg-neutral-700 {option.type === type
|
||||
? 'border-primary-400'
|
||||
: `border-gray-200 dark:border-neutral-600 ${
|
||||
!option.isDisabled && 'hover:scale-95'
|
||||
@@ -210,21 +233,33 @@
|
||||
<div>
|
||||
<div class="mb-5 flex items-center gap-2">
|
||||
{#each tags as tag}
|
||||
<Badge
|
||||
class={selectedTag === tag ? 'bg-primary-400' : ''}
|
||||
onclick={() => {
|
||||
selectedTag = tag;
|
||||
selectedTemplateId = '';
|
||||
}}>{tag}</Badge
|
||||
<Badge class={selectedTag === tag ? 'bg-primary-400' : ''} onclick={() => handleTagSelection(tag)}
|
||||
>{tag}</Badge
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-2">
|
||||
{#if allTemplates}
|
||||
{#each allTemplates[selectedTag] as template}
|
||||
{#if exerciseTemplateApi.isLoading}
|
||||
<div class="grid grid-cols-2 items-start gap-4 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{#each Array(16) as _}
|
||||
<div
|
||||
class="h-[140px] w-full rounded-md border-2 border-gray-200 p-5 dark:border-neutral-600 dark:bg-neutral-700"
|
||||
>
|
||||
<div class="flex h-full flex-col justify-evenly">
|
||||
<Skeleton class="h-4 w-3/4" />
|
||||
<div class="flex flex-col items-start justify-between gap-1">
|
||||
<Skeleton class="h-3 w-20" />
|
||||
<Skeleton class="h-3 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if exerciseTemplateApi.templates.length > 0}
|
||||
<div class="grid grid-cols-2 items-start gap-4 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{#each exerciseTemplateApi.templates as template}
|
||||
<button
|
||||
class="h-[140px] w-[161px] rounded-md border-2 p-5 hover:scale-95 dark:bg-neutral-700 {template.id ===
|
||||
class="h-[140px] w-full rounded-md border-2 p-5 hover:scale-95 dark:bg-neutral-700 {template.id ===
|
||||
selectedTemplateId
|
||||
? 'border-primary-400'
|
||||
: `border-gray-200 dark:border-neutral-600 `} flex flex-col transition-all ease-in-out"
|
||||
@@ -248,28 +283,17 @@
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<Button variant="outline" onclick={handleBack}>
|
||||
{$t('course.navItem.lessons.exercises.new_exercise_modal.back')}
|
||||
</Button>
|
||||
<Button
|
||||
disabled={!selectedTemplateId || !allTemplates}
|
||||
disabled={!selectedTemplateId || exerciseTemplateApi.templates.length === 0}
|
||||
loading={isTemplateFinishedLoading}
|
||||
onclick={async () => {
|
||||
isTemplateFinishedLoading = true;
|
||||
const template = allTemplates?.[selectedTag]?.find((t) => t.id === selectedTemplateId);
|
||||
|
||||
if (!template) return;
|
||||
|
||||
console.log('Selected template', template);
|
||||
|
||||
await handleTemplateCreate(template.data);
|
||||
|
||||
isTemplateFinishedLoading = true;
|
||||
}}
|
||||
onclick={handleTemplateSelection}
|
||||
>
|
||||
{$t('course.navItem.lessons.exercises.new_exercise_modal.finish')}
|
||||
</Button>
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import * as Breadcrumb from '@cio/ui/base/breadcrumb';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
import type { Exercise as ExerciseType } from '$lib/utils/types';
|
||||
|
||||
import type { ExerciseTemplate, Exercise as ExerciseType } from '$lib/utils/types';
|
||||
import { formatDate } from '$lib/utils/functions/routes/dashboard';
|
||||
import { isQuestionnaireFetching, questionnaire } from '../store/exercise';
|
||||
import { createExercise, createExerciseFromTemplate } from '$lib/utils/services/courses';
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from './template.svelte';
|
||||
@@ -0,0 +1,39 @@
|
||||
import { BaseApi, classroomio } from '$lib/utils/services/api';
|
||||
import type { TExerciseTemplate } from '@cio/db/types';
|
||||
import type { GetTemplateByIdResponse, GetTemplateByTagData, GetTemplateByTagResponse } from '../utils/types';
|
||||
|
||||
/**
|
||||
* API class for exercise templates
|
||||
*/
|
||||
class ExerciseTemplateApi extends BaseApi {
|
||||
templates = $state<GetTemplateByTagData>([]);
|
||||
template = $state<TExerciseTemplate>({} as TExerciseTemplate);
|
||||
|
||||
/**
|
||||
* Fetches an exercise template metadata
|
||||
*/
|
||||
async fetchTemplateById(id: string) {
|
||||
await this.execute<GetTemplateByIdResponse>({
|
||||
requestFn: () => classroomio.exercise.template[':id'].$get({ param: { id } }),
|
||||
logContext: 'fetching exercise template by id',
|
||||
onSuccess: (response) => {
|
||||
this.template = response.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches an exercise template metadata
|
||||
*/
|
||||
async fetchTemplatesByTag(tag: string) {
|
||||
await this.execute<GetTemplateByTagResponse>({
|
||||
requestFn: () => classroomio.exercise.template.tag[':tag'].$get({ param: { tag } }),
|
||||
logContext: 'fetching exercise template by tag',
|
||||
onSuccess: (response) => {
|
||||
this.templates = response.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const exerciseTemplateApi = new ExerciseTemplateApi();
|
||||
@@ -0,0 +1,12 @@
|
||||
export const TAGS = {
|
||||
HTML: 'HTML',
|
||||
CSS: 'CSS',
|
||||
JS: 'JS',
|
||||
Typescript: 'Typescript',
|
||||
ReactJS: 'ReactJS',
|
||||
VueJS: 'VueJS',
|
||||
NodeJS: 'NodeJS',
|
||||
Python: 'Python',
|
||||
PHP: 'PHP',
|
||||
GIT: 'GIT'
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import { classroomio, type InferResponseType } from '$lib/utils/services/api';
|
||||
|
||||
export type GetAllTemplatesMetadataResponse = typeof classroomio.exercise.template.$get;
|
||||
export type GetAllTemplatesMetadataSuccess = Extract<
|
||||
InferResponseType<GetAllTemplatesMetadataResponse>,
|
||||
{ success: true }
|
||||
>;
|
||||
export type GetAllTemplatesMetadataData = GetAllTemplatesMetadataSuccess['data'];
|
||||
|
||||
export type GetTemplateByTagResponse = (typeof classroomio.exercise.template)['tag'][':tag']['$get'];
|
||||
export type GetTemplateByTagSuccess = Extract<InferResponseType<GetTemplateByTagResponse>, { success: true }>;
|
||||
export type GetTemplateByTagData = GetTemplateByTagSuccess['data'];
|
||||
|
||||
export type GetTemplateByIdResponse = (typeof classroomio.exercise.template)[':id']['$get'];
|
||||
export type GetTemplateByIdSuccess = Extract<InferResponseType<GetTemplateByIdResponse>, { success: true }>;
|
||||
export type GetTemplateByIdData = GetTemplateByIdSuccess['data'];
|
||||
@@ -1,118 +0,0 @@
|
||||
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;
|
||||
@@ -1,118 +0,0 @@
|
||||
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;
|
||||
@@ -1,118 +0,0 @@
|
||||
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;
|
||||
@@ -1,120 +0,0 @@
|
||||
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;
|
||||
@@ -1,126 +0,0 @@
|
||||
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;
|
||||
@@ -1,129 +0,0 @@
|
||||
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;
|
||||
@@ -1,126 +0,0 @@
|
||||
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;
|
||||
@@ -1,126 +0,0 @@
|
||||
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;
|
||||
@@ -1,138 +0,0 @@
|
||||
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;
|
||||
@@ -1,139 +0,0 @@
|
||||
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;
|
||||
@@ -1,137 +0,0 @@
|
||||
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;
|
||||
@@ -1,132 +0,0 @@
|
||||
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;
|
||||
@@ -1,137 +0,0 @@
|
||||
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;
|
||||
@@ -1,139 +0,0 @@
|
||||
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;
|
||||
@@ -1,139 +0,0 @@
|
||||
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;
|
||||
@@ -1,139 +0,0 @@
|
||||
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;
|
||||
@@ -1,139 +0,0 @@
|
||||
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;
|
||||
@@ -1,139 +0,0 @@
|
||||
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;
|
||||
@@ -1,129 +0,0 @@
|
||||
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;
|
||||
@@ -1,119 +0,0 @@
|
||||
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;
|
||||
@@ -1,45 +0,0 @@
|
||||
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]: async () => (await import('./001_css_syntax')).default,
|
||||
[CSS_IDS.CSS_SELECTORS]: async () => (await import('./002_css_selectors')).default,
|
||||
[CSS_IDS.CSS_HOWTO]: async () => (await import('./003_css_howTo')).default,
|
||||
[CSS_IDS.CSS_COMMENTS]: async () => (await import('./004_css_comments')).default,
|
||||
[CSS_IDS.CSS_COLORS]: async () => (await import('./005_css_colors')).default,
|
||||
[CSS_IDS.CSS_BACKGROUNDS]: async () => (await import('./006_css_backgrounds')).default,
|
||||
[CSS_IDS.CSS_BORDERS]: async () => (await import('./007_css_borders')).default,
|
||||
[CSS_IDS.CSS_MARGIN]: async () => (await import('./008_css_margin')).default,
|
||||
[CSS_IDS.CSS_PADDING]: async () => (await import('./009_css_padding')).default,
|
||||
[CSS_IDS.CSS_DIMENTIONS]: async () => (await import('./010_css_dimentions')).default,
|
||||
[CSS_IDS.CSS_BOXMODEL]: async () => (await import('./011_css_boxModel')).default,
|
||||
[CSS_IDS.CSS_OUTLINE]: async () => (await import('./012_css_outline')).default,
|
||||
[CSS_IDS.CSS_TEXT]: async () => (await import('./013_css_text')).default,
|
||||
[CSS_IDS.CSS_FONTS]: async () => (await import('./014_css_fonts')).default,
|
||||
[CSS_IDS.CSS_ICONS]: async () => (await import('./015_css_icons')).default,
|
||||
[CSS_IDS.CSS_LINKS]: async () => (await import('./016_css_links')).default,
|
||||
[CSS_IDS.CSS_LISTS]: async () => (await import('./017_css_lists')).default,
|
||||
[CSS_IDS.CSS_TABLES]: async () => (await import('./018_css_tables')).default,
|
||||
[CSS_IDS.CSS_DISPLAY]: async () => (await import('./019_css_display')).default,
|
||||
[CSS_IDS.CSS_MAXWIDTH]: async () => (await import('./020_css_maxWidth')).default
|
||||
};
|
||||
@@ -1,125 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git New Files Quiz',
|
||||
description: 'Test your knowledge of adding new files in Git',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What command is used to stage all new files for a commit in Git?',
|
||||
name: 'question1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'git add .', is_correct: true },
|
||||
{ label: 'git commit -m', is_correct: false },
|
||||
{ label: 'git push origin', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does "git status" show for new files?',
|
||||
name: 'question2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Untracked files', is_correct: true },
|
||||
{ label: 'Staged files', is_correct: false },
|
||||
{ label: 'Committed files', is_correct: false },
|
||||
{ label: 'Modified files', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of "git add" in your own words.',
|
||||
name: 'question3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the recommended way to unstage a file in Git?',
|
||||
name: 'question4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'git unstage', is_correct: false },
|
||||
{ label: 'git reset HEAD', is_correct: true },
|
||||
{ label: 'git checkout', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you commit only specific new files in Git?',
|
||||
name: 'question5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Use "git commit -a"', is_correct: false },
|
||||
{ label: 'Add the specific files with "git add" and then commit', is_correct: true },
|
||||
{ label: 'Use "git commit --all"', is_correct: false },
|
||||
{ label: 'Use "git commit -m"', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git diff" for new files?',
|
||||
name: 'question6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What does "git stash" do?',
|
||||
name: 'question7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Deletes all your changes', is_correct: false },
|
||||
{ label: 'Temporarily saves your changes', is_correct: true },
|
||||
{ label: 'Creates a new branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git commit -m"?',
|
||||
name: 'question8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To stage new files', is_correct: false },
|
||||
{ label: 'To commit changes with a specified message', is_correct: true },
|
||||
{ label: 'To push changes to a remote repository', is_correct: false },
|
||||
{ label: 'To create a new branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the Git stash operation in your own words.',
|
||||
name: 'question9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git log"?',
|
||||
name: 'question10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To view a list of available branches', is_correct: false },
|
||||
{ label: 'To view the commit history', is_correct: true },
|
||||
{ label: 'To merge branches', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,125 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Staging Environment Quiz',
|
||||
description: 'Test your knowledge of Git Staging Environment',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does the "git status" command display in the staging environment?',
|
||||
name: 'question1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Changes staged for commit', is_correct: false },
|
||||
{ label: 'Changes not staged for commit', is_correct: false },
|
||||
{ label: 'Both staged and unstaged changes', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the Git staging area?',
|
||||
name: 'question2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To store all changes made in the repository', is_correct: false },
|
||||
{ label: 'To review changes before committing', is_correct: true },
|
||||
{ label: 'To create new branches', is_correct: false },
|
||||
{ label: 'To push changes to a remote repository', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the process of staging changes in Git in your own words.',
|
||||
name: 'question3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you stage specific files for a commit in Git?',
|
||||
name: 'question4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Use "git add ." to stage all changes', is_correct: false },
|
||||
{ label: 'Use "git add filename" to stage a specific file', is_correct: true },
|
||||
{ label: 'Use "git stage filename"', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "git reset" command in the staging environment?',
|
||||
name: 'question5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To unstage changes', is_correct: true },
|
||||
{ label: 'To discard all changes', is_correct: false },
|
||||
{ label: 'To create a new branch', is_correct: false },
|
||||
{ label: 'To view the commit history', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does "git diff" show in the staging environment?',
|
||||
name: 'question6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git stash?',
|
||||
name: 'question7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A temporary storage area for changes', is_correct: true },
|
||||
{ label: 'A remote Git repository', is_correct: false },
|
||||
{ label: 'A Git branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you unstage changes in Git?',
|
||||
name: 'question8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Use "git stage filename"', is_correct: false },
|
||||
{ label: 'Use "git unstage filename"', is_correct: true },
|
||||
{ label: 'Use "git reset"', is_correct: true },
|
||||
{ label: 'Use "git diff"', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the Git stash operation in your own words.',
|
||||
name: 'question9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git log" in the staging environment?',
|
||||
name: 'question10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To view a list of available branches', is_correct: false },
|
||||
{ label: 'To view the commit history', is_correct: true },
|
||||
{ label: 'To create a new branch', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,125 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Commit Quiz',
|
||||
description: 'Test your knowledge of Git commits',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is a Git commit?',
|
||||
name: 'question1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A snapshot of your code at a specific point in time', is_correct: true },
|
||||
{ label: 'A type of Git branch', is_correct: false },
|
||||
{ label: 'A remote repository', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the "git commit" command do?',
|
||||
name: 'question2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Creates a new branch', is_correct: false },
|
||||
{ label: 'Records changes to the repository', is_correct: true },
|
||||
{ label: 'Deletes the current branch', is_correct: false },
|
||||
{ label: 'Pushes changes to a remote repository', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of "git commit" in your own words.',
|
||||
name: 'question3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git commit message?',
|
||||
name: 'question4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A comment about the weather', is_correct: false },
|
||||
{ label: 'A brief description of the changes made in the commit', is_correct: true },
|
||||
{ label: 'A list of all the files in the repository', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you commit changes with a message in Git?',
|
||||
name: 'question5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Use "git commit -m"', is_correct: true },
|
||||
{ label: 'Use "git push"', is_correct: false },
|
||||
{ label: 'Use "git checkout"', is_correct: false },
|
||||
{ label: 'Use "git add"', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git log"?',
|
||||
name: 'question6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git branch?',
|
||||
name: 'question7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A snapshot of your code at a specific point in time', is_correct: false },
|
||||
{ label: 'A separate line of development', is_correct: true },
|
||||
{ label: 'A Git commit message', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git reset" in relation to commits?',
|
||||
name: 'question8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To undo the last commit and reset the staging area', is_correct: true },
|
||||
{ label: 'To create a new branch', is_correct: false },
|
||||
{ label: 'To push changes to a remote repository', is_correct: false },
|
||||
{ label: 'To view the commit history', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of "git log" in your own words.',
|
||||
name: 'question9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git merge?',
|
||||
name: 'question10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A conflict resolution process', is_correct: false },
|
||||
{ label: 'Combining changes from one branch into another', is_correct: true },
|
||||
{ label: 'A Git repository backup', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,128 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Amend Quiz',
|
||||
description: 'Test your knowledge of Git Amend',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does "git commit --amend" do?',
|
||||
name: 'question1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Creates a new commit', is_correct: false },
|
||||
{ label: 'Amends the last commit', is_correct: true },
|
||||
{ label: 'Deletes the last commit', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the Git amend operation?',
|
||||
name: 'question2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To add new files to the last commit', is_correct: false },
|
||||
{ label: 'To modify the last commit message', is_correct: true },
|
||||
{ label: 'To create a new branch', is_correct: false },
|
||||
{ label: 'To revert to a previous commit', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the command "git commit --amend" in your own words.',
|
||||
name: 'question3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git stash?',
|
||||
name: 'question4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A temporary storage area for changes', is_correct: true },
|
||||
{ label: 'A remote Git repository', is_correct: false },
|
||||
{ label: 'A Git branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a new branch in Git?',
|
||||
name: 'question5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git branch new-branch', is_correct: true },
|
||||
{ label: 'git create-branch new-branch', is_correct: false },
|
||||
{ label: 'git checkout -b new-branch', is_correct: true },
|
||||
{ label: 'git new-branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is a Git remote?',
|
||||
name: 'question6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git conflict?',
|
||||
name: 'question7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A disagreement between team members', is_correct: false },
|
||||
{ label: 'A merge conflict when merging branches', is_correct: true },
|
||||
{ label: 'A Git error message', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git pull"?',
|
||||
name: 'question8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To push changes to a remote repository', is_correct: false },
|
||||
{
|
||||
label: 'To update your local repository with changes from a remote repository',
|
||||
is_correct: true
|
||||
},
|
||||
{ label: 'To create a new branch', is_correct: false },
|
||||
{ label: 'To create a new commit', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the Git stash operation.',
|
||||
name: 'question9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git tag?',
|
||||
name: 'question10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A label or pointer to a specific commit', is_correct: true },
|
||||
{ label: 'A branch in Git', is_correct: false },
|
||||
{ label: 'A type of Git remote', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,125 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Branch Quiz',
|
||||
description: 'Test your knowledge of Git branches',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is a Git branch?',
|
||||
name: 'question1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A snapshot of your code at a specific point in time', is_correct: false },
|
||||
{ label: 'A separate line of development', is_correct: true },
|
||||
{ label: 'A Git commit message', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a new branch in Git?',
|
||||
name: 'question2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git branch new-branch', is_correct: false },
|
||||
{ label: 'git create-branch new-branch', is_correct: false },
|
||||
{ label: 'git checkout -b new-branch', is_correct: true },
|
||||
{ label: 'git new-branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of Git branches in your own words.',
|
||||
name: 'question3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you switch between Git branches?',
|
||||
name: 'question4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'git checkout branch-name', is_correct: true },
|
||||
{ label: 'git switch branch-name', is_correct: false },
|
||||
{ label: 'git change-branch branch-name', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "git merge" command?',
|
||||
name: 'question5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To create a new branch', is_correct: false },
|
||||
{ label: 'To merge changes from one branch into another', is_correct: true },
|
||||
{ label: 'To view the commit history', is_correct: false },
|
||||
{ label: 'To delete a branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does "git branch" show you?',
|
||||
name: 'question6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git conflict?',
|
||||
name: 'question7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A disagreement between team members', is_correct: false },
|
||||
{ label: 'A merge conflict when merging branches', is_correct: true },
|
||||
{ label: 'A Git error message', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you delete a Git branch?',
|
||||
name: 'question8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git delete branch-name', is_correct: false },
|
||||
{ label: 'git remove branch-name', is_correct: false },
|
||||
{ label: 'git branch -d branch-name', is_correct: true },
|
||||
{ label: 'git checkout branch-name', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the Git conflict resolution process.',
|
||||
name: 'question9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git log" in relation to branches?',
|
||||
name: 'question10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To view a list of available branches', is_correct: false },
|
||||
{ label: 'To view the commit history of a branch', is_correct: true },
|
||||
{ label: 'To create a new branch', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,125 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Branch and Merge Quiz',
|
||||
description: 'Test your knowledge of Git branch and merge operations',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is a Git branch?',
|
||||
name: 'question1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A snapshot of your code at a specific point in time', is_correct: false },
|
||||
{ label: 'A separate line of development', is_correct: true },
|
||||
{ label: 'A Git commit message', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a new branch in Git?',
|
||||
name: 'question2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git branch new-branch', is_correct: false },
|
||||
{ label: 'git create-branch new-branch', is_correct: false },
|
||||
{ label: 'git checkout -b new-branch', is_correct: true },
|
||||
{ label: 'git new-branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of Git branches in your own words.',
|
||||
name: 'question3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you switch between Git branches?',
|
||||
name: 'question4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'git checkout branch-name', is_correct: true },
|
||||
{ label: 'git switch branch-name', is_correct: false },
|
||||
{ label: 'git change-branch branch-name', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "git merge" command?',
|
||||
name: 'question5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To create a new branch', is_correct: false },
|
||||
{ label: 'To merge changes from one branch into another', is_correct: true },
|
||||
{ label: 'To view the commit history', is_correct: false },
|
||||
{ label: 'To delete a branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does "git branch" show you?',
|
||||
name: 'question6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git conflict?',
|
||||
name: 'question7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A disagreement between team members', is_correct: false },
|
||||
{ label: 'A merge conflict when merging branches', is_correct: true },
|
||||
{ label: 'A Git error message', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you delete a Git branch?',
|
||||
name: 'question8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git delete branch-name', is_correct: false },
|
||||
{ label: 'git remove branch-name', is_correct: false },
|
||||
{ label: 'git branch -d branch-name', is_correct: true },
|
||||
{ label: 'git checkout branch-name', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the Git conflict resolution process.',
|
||||
name: 'question9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git log" in relation to branches?',
|
||||
name: 'question10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To view a list of available branches', is_correct: false },
|
||||
{ label: 'To view the commit history of a branch', is_correct: true },
|
||||
{ label: 'To create a new branch', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,128 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Pull from Remote Quiz',
|
||||
description: 'Test your knowledge of Git pull operations from a remote repository',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is Git pull used for?',
|
||||
name: 'question1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To push changes to a remote repository', is_correct: false },
|
||||
{
|
||||
label: 'To fetch changes from a remote repository and merge them into the current branch',
|
||||
is_correct: true
|
||||
},
|
||||
{ label: 'To delete a remote repository', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you perform a Git pull from a remote repository?',
|
||||
name: 'question2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git pull origin branch-name', is_correct: true },
|
||||
{ label: 'git push origin branch-name', is_correct: false },
|
||||
{ label: 'git fetch origin branch-name', is_correct: false },
|
||||
{ label: 'git merge origin branch-name', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of Git pull in your own words.',
|
||||
name: 'question3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a remote repository in Git?',
|
||||
name: 'question4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A local copy of a repository', is_correct: false },
|
||||
{ label: 'A repository hosted on a remote server', is_correct: true },
|
||||
{ label: 'A repository with no internet connection', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you specify the remote repository and branch when pulling changes in Git?',
|
||||
name: 'question5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'By using "git pull origin branch-name"', is_correct: true },
|
||||
{ label: 'By using "git pull branch-name"', is_correct: false },
|
||||
{ label: 'By using "git pull remote-name branch-name"', is_correct: false },
|
||||
{ label: 'By using "git pull"', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does "git fetch" do?',
|
||||
name: 'question6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git conflict?',
|
||||
name: 'question7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A disagreement between team members', is_correct: false },
|
||||
{ label: 'A merge conflict when merging branches', is_correct: true },
|
||||
{ label: 'A Git error message', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git log" in relation to Git pull?',
|
||||
name: 'question8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To view the commit history of the remote repository', is_correct: false },
|
||||
{ label: 'To view the commit history of the local repository', is_correct: true },
|
||||
{ label: 'To delete the commit history', is_correct: false },
|
||||
{ label: 'To create a new branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the Git conflict resolution process.',
|
||||
name: 'question9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git pull request?',
|
||||
name: 'question10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A request to delete a branch', is_correct: false },
|
||||
{ label: 'A request to merge changes into a branch', is_correct: true },
|
||||
{ label: 'A request for technical support', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,125 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Push to Remote Quiz',
|
||||
description: 'Test your knowledge of Git push operations to a remote repository',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is Git push used for?',
|
||||
name: 'question1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To fetch changes from a remote repository', is_correct: false },
|
||||
{ label: 'To send changes to a remote repository', is_correct: true },
|
||||
{ label: 'To delete a remote repository', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you perform a Git push to a remote repository?',
|
||||
name: 'question2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git push origin branch-name', is_correct: true },
|
||||
{ label: 'git pull origin branch-name', is_correct: false },
|
||||
{ label: 'git fetch origin branch-name', is_correct: false },
|
||||
{ label: 'git merge origin branch-name', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of Git push in your own words.',
|
||||
name: 'question3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a remote repository in Git?',
|
||||
name: 'question4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A local copy of a repository', is_correct: false },
|
||||
{ label: 'A repository hosted on a remote server', is_correct: true },
|
||||
{ label: 'A repository with no internet connection', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you specify the remote repository and branch when pushing changes in Git?',
|
||||
name: 'question5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'By using "git push origin branch-name"', is_correct: true },
|
||||
{ label: 'By using "git push branch-name"', is_correct: false },
|
||||
{ label: 'By using "git push remote-name branch-name"', is_correct: false },
|
||||
{ label: 'By using "git push"', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does "git pull" do?',
|
||||
name: 'question6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git conflict?',
|
||||
name: 'question7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A disagreement between team members', is_correct: false },
|
||||
{ label: 'A merge conflict when merging branches', is_correct: true },
|
||||
{ label: 'A Git error message', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git log" in relation to Git push?',
|
||||
name: 'question8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To view the commit history of the remote repository', is_correct: false },
|
||||
{ label: 'To view the commit history of the local repository', is_correct: true },
|
||||
{ label: 'To delete the commit history', is_correct: false },
|
||||
{ label: 'To create a new branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the Git conflict resolution process.',
|
||||
name: 'question9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git push request?',
|
||||
name: 'question10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A request to fetch changes from a remote repository', is_correct: false },
|
||||
{ label: 'A request to send changes to a remote repository', is_correct: true },
|
||||
{ label: 'A request for technical support', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,125 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Remote Branch Quiz',
|
||||
description: 'Test your knowledge of Git remote branches',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is a Git remote branch?',
|
||||
name: 'question1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A branch on your local machine', is_correct: false },
|
||||
{ label: 'A branch on a remote repository', is_correct: true },
|
||||
{ label: 'A branch with no commits', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you list remote branches in Git?',
|
||||
name: 'question2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git branch', is_correct: false },
|
||||
{ label: 'git remote show origin', is_correct: false },
|
||||
{ label: 'git branch -r', is_correct: true },
|
||||
{ label: 'git remote -v', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of Git remote branches in your own words.',
|
||||
name: 'question3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you create a new remote branch in Git?',
|
||||
name: 'question4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'git branch new-branch', is_correct: false },
|
||||
{ label: 'git checkout -b new-branch', is_correct: false },
|
||||
{ label: 'git push origin new-branch', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you switch to a remote branch in Git?',
|
||||
name: 'question5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git checkout branch-name', is_correct: false },
|
||||
{ label: 'git checkout -b branch-name', is_correct: false },
|
||||
{ label: 'git checkout origin/branch-name', is_correct: true },
|
||||
{ label: 'git switch branch-name', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does "git push" do?',
|
||||
name: 'question6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git conflict?',
|
||||
name: 'question7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A disagreement between team members', is_correct: false },
|
||||
{ label: 'A merge conflict when merging branches', is_correct: true },
|
||||
{ label: 'A Git error message', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you delete a remote branch in Git?',
|
||||
name: 'question8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git delete remote branch-name', is_correct: false },
|
||||
{ label: 'git push origin --delete branch-name', is_correct: true },
|
||||
{ label: 'git remove remote branch-name', is_correct: false },
|
||||
{ label: 'git branch -d branch-name', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the Git conflict resolution process.',
|
||||
name: 'question9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git pull request?',
|
||||
name: 'question10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A request to delete a branch', is_correct: false },
|
||||
{ label: 'A request to merge changes into a branch', is_correct: true },
|
||||
{ label: 'A request for technical support', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,128 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Branch Pull from Remote Quiz',
|
||||
description: 'Test your knowledge of Git branch pull operations from a remote repository',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is Git branch pull used for?',
|
||||
name: 'question1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To push changes to a remote branch', is_correct: false },
|
||||
{
|
||||
label: 'To fetch changes from a remote branch and merge them into the current branch',
|
||||
is_correct: true
|
||||
},
|
||||
{ label: 'To delete a remote branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you perform a Git branch pull from a remote repository?',
|
||||
name: 'question2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'git pull origin branch-name', is_correct: true },
|
||||
{ label: 'git push origin branch-name', is_correct: false },
|
||||
{ label: 'git fetch origin branch-name', is_correct: false },
|
||||
{ label: 'git merge origin branch-name', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of Git branch pull in your own words.',
|
||||
name: 'question3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a remote branch in Git?',
|
||||
name: 'question4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A branch on your local machine', is_correct: false },
|
||||
{ label: 'A branch on a remote repository', is_correct: true },
|
||||
{ label: 'A branch with no commits', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you specify the remote repository and branch when pulling changes in Git?',
|
||||
name: 'question5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'By using "git pull origin branch-name"', is_correct: true },
|
||||
{ label: 'By using "git pull branch-name"', is_correct: false },
|
||||
{ label: 'By using "git pull remote-name branch-name"', is_correct: false },
|
||||
{ label: 'By using "git pull"', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does "git fetch" do?',
|
||||
name: 'question6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git conflict?',
|
||||
name: 'question7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A disagreement between team members', is_correct: false },
|
||||
{ label: 'A merge conflict when merging branches', is_correct: true },
|
||||
{ label: 'A Git error message', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git log" in relation to Git branch pull?',
|
||||
name: 'question8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To view the commit history of the remote branch', is_correct: false },
|
||||
{ label: 'To view the commit history of the local branch', is_correct: true },
|
||||
{ label: 'To delete the commit history', is_correct: false },
|
||||
{ label: 'To create a new branch', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the Git conflict resolution process.',
|
||||
name: 'question9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a Git branch pull request?',
|
||||
name: 'question10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A request to delete a branch', is_correct: false },
|
||||
{ label: 'A request to merge changes into a branch', is_correct: true },
|
||||
{ label: 'A request for technical support', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,212 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Branch Push to Remote Quiz',
|
||||
description: 'Test your knowledge of Git branch pushing to remote repositories.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'How do you push a new branch to a remote repository in Git?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'git push origin new-branch',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git branch -b new-branch',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'git pull origin new-branch',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does "git push --force" do?',
|
||||
name: 'q2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'Force pushes all local branches',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Force pushes the current branch to remote',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Deletes the remote repository',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "origin" in "git push origin"?',
|
||||
name: 'q3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: 'It specifies the local branch',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It refers to the remote repository',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'It is not required in "git push"',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you check the status of your Git repository?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'git status',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git log',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'git commit',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What command is used to create a new branch in Git?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'git branch <branch_name>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git checkout -b <branch_name>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'git create <branch_name>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you stage changes for a commit in Git?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'git add <file>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git commit -m "Message"',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'git push',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which command is used to remove a file from the staging area in Git?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'git reset',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git rm',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git commit',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a Git tag for a specific commit?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'git tag -a <tag_name> <commit_sha>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git branch -t <tag_name> <commit_sha>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'git commit -m "Tag: <tag_name>"',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you discard changes in your working directory in Git?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'git reset --hard',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git checkout -- <file>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git commit -m "Discard changes"',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Explain the difference between "git merge" and "git rebase".',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,198 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git/GitHub Flow Quiz',
|
||||
description: 'Test your knowledge of Git and GitHub Flow with practical questions.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of a "Pull Request" in GitHub Flow?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To propose and discuss changes before merging them',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a new branch',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To submit a bug report',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a new branch in Git?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'git checkout -b <branch_name>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git commit -m "New branch"',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'git merge <branch_name>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "git merge" command?',
|
||||
name: 'q3',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To combine changes from one branch into another',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To delete a branch',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create a new branch',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of "Forking" a repository in GitHub.',
|
||||
name: 'q4',
|
||||
points: 3,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you resolve a merge conflict in Git?',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By manually editing the conflicting files and committing the changes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By deleting the conflicting branch',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By rolling back to the previous commit',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which Git command is used to view the commit history?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'git log',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git branch',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'git pull',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of a "Gitignore" file?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To specify files and directories that should be ignored by Git',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To track all files in the repository',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create a new branch',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which Git command is used to push changes to a remote repository?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'git push origin master',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git commit -m "Push changes"',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'git fetch origin',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is a "Git branch"?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'A separate line of development in a Git repository',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A software development framework',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A Git commit message',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between "git pull" and "git fetch".',
|
||||
name: 'q10',
|
||||
points: 3,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,198 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'GitHub Pages Quiz',
|
||||
description: 'Test your knowledge of GitHub Pages with practical questions.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of GitHub Pages?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To host and publish static web content',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To manage Git repositories',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create mobile apps',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you enable GitHub Pages for a repository?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'In the repository settings, under "GitHub Pages"',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By creating a new branch',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By merging a pull request',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the default URL for a GitHub Pages site?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'https://username.github.io/repository-name/',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'https://github.com/username/repository-name/',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'https://repository-name.github.io/username/',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of a "custom domain" for GitHub Pages.',
|
||||
name: 'q4',
|
||||
points: 3,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you configure a custom domain for a GitHub Pages site?',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'Update DNS records with your domain registrar',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Add a CNAME file to your repository',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Modify the GitHub Pages settings in your repository',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of a "404.html" file in a GitHub Pages repository?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To customize the error page for "Page Not Found"',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To store images and assets',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create a new branch',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you enforce HTTPS on a GitHub Pages site?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'Enable the "Enforce HTTPS" option in repository settings',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Use a custom SSL certificate',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Install a GitHub Pages plugin',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of a "gh-pages" branch in a GitHub repository?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To host the GitHub Pages site content',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To store code backups',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To track issues and pull requests',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is Jekyll in the context of GitHub Pages?',
|
||||
name: 'q9',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you access the GitHub Pages deployment history?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'In the GitHub Actions tab of the repository',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By running a Git command',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'In the repository settings',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,198 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Remote and Forking Quiz',
|
||||
description: 'Test your knowledge of Git Remote and Forking with practical questions.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does it mean to "fork" a GitHub repository?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: "To create a personal copy of someone else's repository",
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To merge multiple branches',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To delete a repository',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a fork of a GitHub repository?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Click the "Fork" button on the repository page',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Use the "git fork" command',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Ask the repository owner to send you a copy',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of a "remote" in Git?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To represent a connection to a remote repository',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To manage local branches',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To store code backups',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of a "pull request" in the context of forking a repository.',
|
||||
name: 'q4',
|
||||
points: 3,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you keep a forked repository up to date with changes from the original repository?',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By creating a pull request',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By configuring a remote named "upstream" and fetching updates',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By deleting the fork and re-forking the repository',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is a "merge conflict" in Git?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'A situation where Git cannot automatically merge changes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A conflict between team members',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A bug in the Git software',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you resolve a merge conflict in Git?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'Manually edit the conflicting files and commit the changes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Choose one version and discard the other',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Ask the repository owner to resolve it',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "git remote -v" command?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To view the URLs of remote repositories',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a new remote repository',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To list local branches',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of a "forking workflow" in Git.',
|
||||
name: 'q9',
|
||||
points: 3,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you contribute changes from a forked repository back to the original repository?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By creating a pull request from your fork to the original repository',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By copying and pasting the code into the original repository',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By sending an email to the repository owner',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,199 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Clone Quiz',
|
||||
description: 'Test your knowledge of Git Clone with practical questions.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the "git clone" command?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To create a copy of a remote repository on your local machine',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To delete a Git repository',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To merge branches',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you clone a Git repository from a specific branch?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'git clone -b <branch_name> <repository_url>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'git branch -t <branch_name> <repository_url>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'git pull origin <branch_name>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the default name of the directory where "git clone" creates a local copy of the repository?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'The same as the repository name',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'LocalGitRepo',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'CloneRepo',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of a "bare" Git repository.',
|
||||
name: 'q4',
|
||||
points: 3,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "git clone --depth" option?',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To limit the clone to a specified number of commits deep',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a shallow clone of a repository',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To clone only the latest commit',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you clone a Git repository without downloading the commit history?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Using the "git clone --depth 1" command',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'It is not possible to clone without history',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Using the "git clone --shallow" command',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "git clone --recurse-submodules" option?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To clone and initialize submodules within the repository',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a shallow clone of submodules',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To clone only the parent repository, excluding submodules',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you clone a repository from a specific commit?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By specifying the commit hash after the repository URL',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By using the "git clone --commit" command',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It is not possible to clone from a specific commit',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of the "git submodule" command in a Git repository.',
|
||||
name: 'q9',
|
||||
points: 3,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the main difference between "git clone" and "git pull"?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'git clone creates a new copy, while git pull updates an existing copy',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label:
|
||||
'git clone creates a copy of the entire repository history, while git pull only gets the latest changes',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'git clone is used for cloning remote repositories, while git pull is used for local repositories',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,202 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Remote Pull Request Quiz',
|
||||
description: 'Test your knowledge of sending pull requests with Git remote with practical questions.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of sending a pull request in Git?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To propose changes to a repository and request that they be merged',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a new branch in the repository',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To delete a Git repository',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you send a pull request to a remote repository?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By pushing your changes to a branch and creating a pull request on the repository platform',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By sending an email to the repository owner',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By using the "git send-request" command',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What information should be included in a pull request?',
|
||||
name: 'q3',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'A description of the changes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The branch you want to merge into',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Your email address',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A screenshot of the code changes',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of a "base branch" in the context of a pull request.',
|
||||
name: 'q4',
|
||||
points: 3,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of reviewing and commenting on a pull request?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To provide feedback on the proposed changes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a new branch in the repository',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To merge the changes immediately',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you indicate that you approve of a pull request?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By leaving a comment with an approving message',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By sending a direct message to the repository owner',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By clicking a "Submit Approval" button',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of continuous integration (CI) checks in a pull request?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To automatically test and verify the proposed changes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To display advertising on the pull request page',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To increase the number of comments on the pull request',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What happens after a pull request is approved and passes all checks?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'The changes are merged into the base branch',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The pull request is automatically closed',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The changes are rejected',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of a "conflict" in the context of a pull request.',
|
||||
name: 'q9',
|
||||
points: 3,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you track the status of a pull request?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By visiting the pull request page on the repository platform',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By using the "git status" command',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By sending an email to the repository owner',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,198 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Ignore Quiz',
|
||||
description: 'Test your knowledge of .gitignore with practical questions.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the .gitignore file in a Git repository?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To specify which files and directories should be excluded from version control',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To store sensitive information like passwords',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To track changes in the .gitignore file itself',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you create a .gitignore file in your Git repository?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By manually creating a file named .gitignore',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By using the "git ignore" command',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The .gitignore file is automatically generated by Git',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "*" wildcard in a .gitignore pattern?',
|
||||
name: 'q3',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To match zero or more characters',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To match exactly one character',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To match a specific file name',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of a "global" .gitignore file.',
|
||||
name: 'q4',
|
||||
points: 3,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What happens if you add a file to the .gitignore list after it has been committed to the repository?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'The file will continue to be tracked by Git',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The file will be untracked in future commits',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The file will be deleted from the repository',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you check which files are being ignored by Git in a repository?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By using the "git ignored" command',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By inspecting the .gitignore file',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By using the "git status" command',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the ".gitignore" file located in your home directory?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To specify global Git ignore patterns for all repositories',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To store personal Git configuration settings',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To list your favorite Git repositories',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you force Git to track files that are listed in the .gitignore file?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By using the "git add --force" command',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By removing the file from the .gitignore list and committing the change',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'It is not possible to track ignored files',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of a ".gitignore" template.',
|
||||
name: 'q9',
|
||||
points: 3,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the ".git/info/exclude" file in a Git repository?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To specify repository-specific ignore patterns',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To store repository metadata',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To list contributors to the repository',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,185 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Security and SSH Quiz',
|
||||
description: 'Test your knowledge of Git security and SSH with practical questions.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the primary purpose of using SSH keys with Git?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To securely authenticate and communicate with remote Git repositories',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To store sensitive information in Git repositories',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To track changes in SSH keys',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you generate a new SSH key pair?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By using the "ssh-keygen" command',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By sending a request to the Git repository hosting service',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'SSH keys cannot be generated manually',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between a public SSH key and a private SSH key.',
|
||||
name: 'q3',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of adding your SSH public key to your Git hosting service?',
|
||||
name: 'q4',
|
||||
points: 3,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you configure Git to use an SSH key for authentication?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By adding the SSH key to your SSH agent and configuring Git to use it',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By including the SSH key in your Git repository',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By manually entering the SSH key every time you push or pull',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of SSH key passphrase?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To add an extra layer of security to your SSH key',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To store the SSH key on the Git hosting service',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To generate a new SSH key pair',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What should you do if you lose your SSH private key?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Generate a new SSH key pair and update your Git hosting service with the new public key',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'There is no way to recover from a lost SSH private key',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Contact your Git hosting service to reset your password',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of two-factor authentication (2FA) in SSH.',
|
||||
name: 'q8',
|
||||
points: 3,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of SSH key fingerprints?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To verify the authenticity of an SSH key',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To encrypt SSH key data',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To increase the length of an SSH key',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you check if your SSH key is properly configured in Git?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By using the "ssh -T" command to test authentication with your Git hosting service',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By checking the ".ssh" directory in your home directory',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'There is no way to verify SSH key configuration in Git',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,185 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Revert Quiz',
|
||||
description: 'Test your knowledge of Git revert with practical questions.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the "git revert" command in Git?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To create a new branch in the repository',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To undo a previous commit by creating a new commit',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To delete a Git repository',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you revert a specific commit in Git?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By using the "git revert" command followed by the commit hash',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By deleting the commit from the commit history',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By creating a new branch and manually reverting changes',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between "git revert" and "git reset" commands.',
|
||||
name: 'q3',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is a potential drawback of using "git revert" to undo commits?',
|
||||
name: 'q4',
|
||||
points: 3,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you revert multiple consecutive commits in Git?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By running "git revert" multiple times for each commit',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By creating a new branch and deleting the unwanted commits',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It is not possible to revert multiple commits at once',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is a "revert commit" in Git?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'A new commit that undoes the changes introduced by a previous commit',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A commit that creates a new branch',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A commit with no changes',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you preview the changes that will be made by a "git revert" operation?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By using the "git diff" command with the commit hash',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By using the "git show" command with the commit hash',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It is not possible to preview changes before reverting',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What happens to the commit history after a "git revert" operation?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'A new commit is added to undo the changes, preserving the commit history',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The commit history is deleted',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The commit is marked as "reverted" without adding a new commit',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of a "conflict" when reverting changes in Git.',
|
||||
name: 'q9',
|
||||
points: 3,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "git revert -n" command?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To revert a commit without creating a new commit',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To revert a commit and delete the commit history',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To revert a commit and force push it to the remote repository',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,159 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Git Reset Quiz',
|
||||
description: 'Test your knowledge of Git reset with practical questions.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the "git reset" command in Git?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To create a new branch in the repository',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To remove changes from the staging area and uncommit them',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To delete a Git repository',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What are the different modes of "git reset"?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How does "git reset" differ from "git revert"?',
|
||||
name: 'q3',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "git reset HEAD" command?',
|
||||
name: 'q4',
|
||||
points: 3,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What happens to the commit history after a "git reset" operation?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'The commit history is preserved, but the branch pointer moves to a different commit',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The commit history is deleted',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A new branch is created',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of "git reset --hard"?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To reset the branch, staging area, and working directory to a specific commit',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a new branch',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To uncommit changes without affecting the working directory',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you unstage changes from the staging area using "git reset"?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By running "git reset" with no additional arguments',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By specifying the commit hash with "git reset"',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It is not possible to unstage changes with "git reset"',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does "soft," "mixed," and "hard" mean in the context of "git reset"?',
|
||||
name: 'q8',
|
||||
points: 3,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you discard all changes in the working directory using "git reset"?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'By using "git reset --hard HEAD"',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By using "git reset --soft HEAD"',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By using "git reset HEAD"',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of the "reflog" in Git.',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,45 +0,0 @@
|
||||
export const GIT_IDS: { [key: string]: string } = {
|
||||
GIT_NEWFILES: 'GIT_NEWFILES',
|
||||
GIT_STAGING: 'GIT_STAGING',
|
||||
GIT_COMMIT: 'GIT_COMMIT',
|
||||
GIT_AMEND: 'GIT_AMEND',
|
||||
GIT_BRANCH: 'GIT_BRANCH',
|
||||
GIT_BRANCHMERGE: 'GIT_BRANCHMERGE',
|
||||
GIT_PULL: 'GIT_PULL',
|
||||
GIT_PUSH: 'GIT_PUSH',
|
||||
GIT_GITHUBBRANCH: 'GIT_GITHUBBRANCH',
|
||||
GIT_BRANCHPULL: 'GIT_BRANCHPULL',
|
||||
GIT_BRANCHPUSH: 'GIT_BRANCHPUSH',
|
||||
GIT_GITHUBFLOW: 'GIT_GITHUBFLOW',
|
||||
GIT_GITHUBPAGES: 'GIT_GITHUBPAGES',
|
||||
GIT_GITHUBFORK: 'GIT_GITHUBFORK',
|
||||
GIT_CLONE: 'GIT_CLONE',
|
||||
GIT_PULLREQUEST: 'GIT_PULLREQUEST',
|
||||
GIT_IGNORE: 'GIT_IGNORE',
|
||||
GIT_SSH: 'GIT_SSH',
|
||||
GIT_REVERT: 'GIT_REVERT',
|
||||
GIT_RESET: 'GIT_RESET'
|
||||
};
|
||||
|
||||
export const GIT_TEMPLATES = {
|
||||
[GIT_IDS.GIT_NEWFILES]: async () => (await import('./001_git_newFiles')).default,
|
||||
[GIT_IDS.GIT_STAGING]: async () => (await import('./002_git_staging')).default,
|
||||
[GIT_IDS.GIT_COMMIT]: async () => (await import('./003_git_commit')).default,
|
||||
[GIT_IDS.GIT_AMEND]: async () => (await import('./004_git_amend')).default,
|
||||
[GIT_IDS.GIT_BRANCH]: async () => (await import('./005_git_branch')).default,
|
||||
[GIT_IDS.GIT_BRANCHMERGE]: async () => (await import('./006_git_branchMerge')).default,
|
||||
[GIT_IDS.GIT_PULL]: async () => (await import('./007_git_pull')).default,
|
||||
[GIT_IDS.GIT_PUSH]: async () => (await import('./008_git_push')).default,
|
||||
[GIT_IDS.GIT_GITHUBBRANCH]: async () => (await import('./009_git_githubBranch')).default,
|
||||
[GIT_IDS.GIT_BRANCHPULL]: async () => (await import('./010_git_branchPull')).default,
|
||||
[GIT_IDS.GIT_BRANCHPUSH]: async () => (await import('./011_git_branchPush')).default,
|
||||
[GIT_IDS.GIT_GITHUBFLOW]: async () => (await import('./012_git_githubFlow')).default,
|
||||
[GIT_IDS.GIT_GITHUBPAGES]: async () => (await import('./013_git_githubPages')).default,
|
||||
[GIT_IDS.GIT_GITHUBFORK]: async () => (await import('./014_git_githubFork')).default,
|
||||
[GIT_IDS.GIT_CLONE]: async () => (await import('./015_git_clone')).default,
|
||||
[GIT_IDS.GIT_PULLREQUEST]: async () => (await import('./016_git_pullRequest')).default,
|
||||
[GIT_IDS.GIT_IGNORE]: async () => (await import('./017_git_ignore')).default,
|
||||
[GIT_IDS.GIT_SSH]: async () => (await import('./018_gitSsh')).default,
|
||||
[GIT_IDS.GIT_REVERT]: async () => (await import('./019_git_revert')).default,
|
||||
[GIT_IDS.GIT_RESET]: async () => (await import('./020_git_reset')).default
|
||||
};
|
||||
@@ -1,122 +0,0 @@
|
||||
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: 'Which HTML tag is used to define the structure of an HTML document?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<html>', is_correct: true },
|
||||
{ label: '<head>', is_correct: false },
|
||||
{ label: '<body>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you create a hyperlink in HTML?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "<a href='url'>link text</a>", is_correct: true },
|
||||
{ label: "<link href='url'>link text</link>", is_correct: false },
|
||||
{ label: '<hyperlink>link text</hyperlink>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a paragraph?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<p>', is_correct: true },
|
||||
{ label: '<paragraph>', is_correct: false },
|
||||
{ label: '<para>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create an ordered list in HTML?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<ol>', is_correct: true },
|
||||
{ label: '<ul>', is_correct: false },
|
||||
{ label: '<li>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a table?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '<table>', is_correct: true },
|
||||
{ label: '<tab>', is_correct: false },
|
||||
{ label: '<tb>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you insert an image in HTML?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: "<img src='image.jpg'>", is_correct: true },
|
||||
{ label: "<image href='image.jpg'>", is_correct: false },
|
||||
{ label: "<picture src='image.jpg'>", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'div' element in HTML?",
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Define a division or a section', is_correct: true },
|
||||
{ label: 'Create a link', is_correct: false },
|
||||
{ label: 'Insert a video', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the use of the 'hr' element in HTML.",
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'iframe' element in HTML?",
|
||||
name: 'q9',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you create an unordered list in HTML?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,119 +0,0 @@
|
||||
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: "What does the 'href' attribute specify?",
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'The source URL of an image', is_correct: false },
|
||||
{ label: 'The target of a hyperlink', is_correct: true },
|
||||
{ label: 'The name of a form field', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you make a text input field read-only in HTML?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "By using the 'disabled' attribute", is_correct: false },
|
||||
{ label: "By using the 'readonly' attribute", is_correct: true },
|
||||
{ label: "By using the 'read-only' attribute", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to define inline styles?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'style', is_correct: true },
|
||||
{ label: 'css', is_correct: false },
|
||||
{ label: 'inline', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you specify multiple CSS classes for an HTML element?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "Use the 'multiple-classes' attribute", is_correct: false },
|
||||
{ label: 'Separate class names with spaces', is_correct: true },
|
||||
{ label: "Use the 'classlist' attribute", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to provide additional information about an element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'alt', is_correct: false },
|
||||
{ label: 'title', is_correct: true },
|
||||
{ label: 'description', is_correct: false },
|
||||
{ label: 'info', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'alt' attribute in an image tag?",
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Define the alignment of the image', is_correct: false },
|
||||
{ label: 'Provide alternative text for the image', is_correct: true },
|
||||
{ label: "Specify the image's width", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the use of the 'placeholder' attribute in an input field.",
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you create a tooltip for an element using HTML attributes?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to define the source URL of an iframe?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "Explain the purpose of the 'disabled' attribute in an input field.",
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,117 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Headings Quiz',
|
||||
description: 'Test your knowledge of HTML headings',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML tag is used for the main heading in a document?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<main>', is_correct: false },
|
||||
{ label: '<title>', is_correct: false },
|
||||
{ label: '<h1>', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How many levels of headings are available in HTML?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '3', is_correct: false },
|
||||
{ label: '4', is_correct: false },
|
||||
{ label: '6', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used for the smallest heading?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<h6>', is_correct: true },
|
||||
{ label: '<h1>', is_correct: false },
|
||||
{ label: '<h3>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can you change the appearance of headings using CSS?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Yes', is_correct: true },
|
||||
{ label: 'No', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used for second-level headings?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '<h2>', is_correct: true },
|
||||
{ label: '<h3>', is_correct: false },
|
||||
{ label: '<h1>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of using semantic headings in HTML?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To improve SEO', is_correct: true },
|
||||
{ label: 'To add background colors', is_correct: false },
|
||||
{ label: 'To control font size', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the difference between an 'h1' element and an 'h2' element in HTML.",
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you align a heading to the center using CSS?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "What is the default font size for an 'h3' element in HTML?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of using heading elements in HTML?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,119 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Paragraphs Quiz',
|
||||
description: 'Test your knowledge of HTML paragraphs',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML tag is used to define a paragraph?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<p>', is_correct: true },
|
||||
{ label: '<para>', is_correct: false },
|
||||
{ label: '<text>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you create a line break in HTML?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<br>', is_correct: true },
|
||||
{ label: '<lb>', is_correct: false },
|
||||
{ label: '<linebreak>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'align' attribute in the 'p' tag?",
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To specify the font size', is_correct: false },
|
||||
{ label: 'To specify the text alignment', is_correct: true },
|
||||
{ label: 'To add a border around the paragraph', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a preformatted text?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<pre>', is_correct: true },
|
||||
{ label: '<text>', is_correct: false },
|
||||
{ label: '<code>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you emphasize text in HTML?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '<strong>', is_correct: true },
|
||||
{ label: '<em>', is_correct: true },
|
||||
{ label: '<b>', is_correct: false },
|
||||
{ label: '<i>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'blockquote' element in HTML?",
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To create a quotation', is_correct: true },
|
||||
{ label: 'To add a background color', is_correct: false },
|
||||
{ label: 'To insert an image', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the use of the 'q' element in HTML.",
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you create a subscript text in HTML?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "What does the 'cite' attribute in the 'blockquote' element specify?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you create a superscript text in HTML?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,120 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Styles Quiz',
|
||||
description: 'Test your knowledge of HTML styles',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML attribute is used to add inline styles?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'style', is_correct: true },
|
||||
{ label: 'css', is_correct: false },
|
||||
{ label: 'class', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of CSS in web development?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To add interactivity to a webpage', is_correct: false },
|
||||
{ label: 'To define the structure of a webpage', is_correct: false },
|
||||
{ label: 'To style the appearance of a webpage', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you include an external CSS file in an HTML document?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Using the <script> tag', is_correct: false },
|
||||
{ label: 'Using the <link> tag', is_correct: true },
|
||||
{ label: 'Using the <style> tag', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'id' attribute in HTML?",
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To define a class for styling', is_correct: false },
|
||||
{ label: 'To define a unique identifier for an element', is_correct: true },
|
||||
{ label: 'To create a hyperlink', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you select multiple HTML elements with a specific class using CSS?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '.classname', is_correct: true },
|
||||
{ label: '#idname', is_correct: false },
|
||||
{ label: 'elementname.classname', is_correct: false },
|
||||
{ label: 'elementname#idname', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'color' property in CSS?",
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To specify the background color', is_correct: false },
|
||||
{ label: 'To specify the font size', is_correct: false },
|
||||
{ label: 'To define the text color', is_correct: true },
|
||||
{ label: 'To set the margin', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the difference between 'padding' and 'margin' in CSS.",
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you center-align an element horizontally using CSS?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "What does the 'font-family' property in CSS specify?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you apply styles to all <p> elements within a <div> element using CSS?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Formatting Quiz',
|
||||
description: 'Test your knowledge of HTML Formatting',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML tag is used to define bold text?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<b>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<strong>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<bold>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create italicized text?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: '<italic>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<i>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<em>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What HTML tag is used to define a superscripted text?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: '<sup>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<super>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<sub>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'small' element in HTML?",
|
||||
name: 'q4',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To make text smaller',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To highlight text',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text bold',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a line break?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: '<br>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<lb>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<linebreak>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'mark' element in HTML?",
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To highlight text',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To underline text',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a subscripted text?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: '<sub>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<sup>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<subscript>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'del' element in HTML?",
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To define a deleted text',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text bold',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a horizontal rule?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<hr>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<line>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<rule>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'ins' element in HTML?",
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To define an inserted text',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To underline text',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Quotation Elements Quiz',
|
||||
description: 'Test your knowledge of HTML Quotation Elements',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML tag is used to define a short quotation?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<q>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<quote>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<short>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'blockquote' element in HTML?",
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To define a block of text as a quotation',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a bullet list',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text bold',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a long quotation?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<longquote>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<q>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<blockquote>',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'cite' element in HTML?",
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'To define the title of a document',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To define the source of a quotation',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a quotation citation?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: '<cite>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<quotation>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<source>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'abbr' element in HTML?",
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: 'To define an abbreviation',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a bullet list',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text italic',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define an abbreviation?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: '<abbr>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<abbrev>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<ab>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'dfn' element in HTML?",
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: 'To define a definition',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a dropdown list',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text bold',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a definition?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<definition>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<def>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<dfn>',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'mark' element in HTML?",
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'To highlight text',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text italic',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,220 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Comments Quiz',
|
||||
description: 'Test your knowledge of HTML Comments',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'How do you start an HTML comment?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<!--',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<comment>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<html-comment>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you end an HTML comment?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '-->',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '</comment>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '</html-comment>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of HTML comments?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To provide information to the browser',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To display text on the webpage',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can you nest comments in HTML?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'Yes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'No',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the correct syntax for adding a comment in an HTML document?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<!-- This is a comment -->',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<! This is a comment !>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '// This is a comment',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'In HTML, comments are visible to:',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'Web developers only',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Both web developers and users',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Web users only',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of hiding comments in HTML?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: 'To prevent comments from being displayed in the browser',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To make comments bold',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you hide comments in HTML?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: '<!--#comment-->',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<!--!comment-->',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<!--*comment*-->',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of conditional comments in HTML?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To target specific versions of Internet Explorer',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a dropdown list',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To make text bold',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a conditional comment for Internet Explorer 9 and below?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<!--[if lt IE 9]>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<!--[if IE 9]>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<!--[if gt IE 9]>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Colors Quiz',
|
||||
description: 'Test your knowledge of HTML Colors',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the hexadecimal color code for red?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '#FF0000',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '#00FF00',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '#0000FF',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the background color of an element?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'background-color',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'color',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'border-color',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you specify a color in CSS using its name?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'color: red;',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'color: #FF0000;',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'color: rgb(255, 0, 0);',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the RGB value for the color green?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'rgb(0, 128, 0)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'rgb(255, 0, 0)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'rgb(0, 0, 255)',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to set the text color of an element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'color',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'text-color',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'font-color',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the hexadecimal color code for blue?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '#0000FF',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '#FF0000',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '#00FF00',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What does the 'opacity' CSS property control?",
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'The transparency of an element',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The size of an element',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The font of an element',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you specify a color in CSS using RGBA?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'color: rgba(255, 0, 0, 0.5);',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'color: rgb(0, 128, 0, 0.5);',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'color: rgba(0, 0, 255);',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the HSL value for the color yellow?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'hsl(60, 100%, 50%)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'hsl(0, 100%, 50%)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'hsl(120, 100%, 50%)',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you specify a color in CSS using HSLA?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'color: hsla(120, 100%, 50%, 0.5);',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'color: hsl(60, 100%, 50%, 0.5);',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'color: hsla(0, 100%, 50%);',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,129 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML CSS Quiz',
|
||||
description: 'Test your knowledge of HTML and CSS',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does CSS stand for?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Cascading Style Sheets', is_correct: true },
|
||||
{ label: 'Computer Style Sheets', is_correct: false },
|
||||
{ label: 'Creative Style Sheets', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to include an external CSS file?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<link>', is_correct: true },
|
||||
{ label: '<style>', is_correct: false },
|
||||
{ label: '<css>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the default value of the 'display' property in CSS for most elements?",
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'block', is_correct: false },
|
||||
{ label: 'inline', is_correct: false },
|
||||
{ label: 'inline-block', is_correct: false },
|
||||
{ label: 'block or inline depending on the element', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "How do you select all elements with the class name 'example' in CSS?",
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '.example', is_correct: true },
|
||||
{ label: '#example', is_correct: false },
|
||||
{ label: 'element.example', is_correct: false },
|
||||
{ label: 'example', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'box-sizing' property in CSS?",
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Control the background box', is_correct: false },
|
||||
{ label: 'Adjust the size of the box', is_correct: false },
|
||||
{ label: 'Define the display type', is_correct: false },
|
||||
{ label: 'Specify how the total width and height are calculated', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which CSS property is used to control the text color of an element?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'text-color', is_correct: false },
|
||||
{ label: 'color', is_correct: true },
|
||||
{ label: 'font-color', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'margin' property in CSS?",
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Set the width of an element', is_correct: false },
|
||||
{ label: 'Define the spacing outside the element', is_correct: true },
|
||||
{ label: 'Change the background color', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you comment out multiple lines of CSS code?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '/* ... */', is_correct: true },
|
||||
{ label: '// ...', is_correct: false },
|
||||
{ label: '<!-- ... -->', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'position' property in CSS?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Explain the concept of CSS specificity.',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Links Quiz',
|
||||
description: 'Test your knowledge of HTML Links',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML tag is used to create a hyperlink?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: '<a>',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<link>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '<hlink>',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What does the 'href' attribute in the 'a' tag specify?",
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'The URL of the linked page',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The color of the link',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The heading of the linked page',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you open a link in a new browser window or tab?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: "target='_new'",
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: "target='_blank'",
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: "target='_window'",
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to specify the email address in an email link?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'mailto',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'email',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'href',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a bookmark link in HTML?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: "<a href='#bookmark'>",
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '<bookmark>',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: "<a href='bookmark'>",
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'target' attribute in the 'a' tag?",
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: 'To specify where to open the linked document',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To change the font color of the link',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To add a border around the link',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a link to an external webpage?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: "<a href='http://www.example.com'>",
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: "<a src='http://www.example.com'>",
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: "<a link='http://www.example.com'>",
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'rel' attribute in the 'a' tag?",
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2],
|
||||
options: [
|
||||
{
|
||||
label: 'To specify the relationship between the current document and the linked document',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To add a background color to the link',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To underline the link',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a link that opens the email client to send an email?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0],
|
||||
options: [
|
||||
{
|
||||
label: "<a href='mailto:[email protected]'>",
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: "<a href='[email protected]'>",
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: "<a send='[email protected]'>",
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'download' attribute in the 'a' tag?",
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[1],
|
||||
options: [
|
||||
{
|
||||
label: 'To specify that the target will be downloaded when a user clicks on the link',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To change the font size of the link',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To add a border around the link',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,134 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Images Quiz',
|
||||
description: 'Test your knowledge of HTML images',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML element is used to display an image?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<img>', is_correct: true },
|
||||
{ label: '<image>', is_correct: false },
|
||||
{ label: '<picture>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'src' attribute in an HTML image?",
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "It specifies the image's width", is_correct: false },
|
||||
{ label: "It defines the image's source URL", is_correct: true },
|
||||
{ label: "It sets the image's alt text", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you specify the width and height of an HTML image?',
|
||||
name: 'q3',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: "Using the 'width' and 'height' attributes", is_correct: true },
|
||||
{ label: 'Using CSS styles', is_correct: true },
|
||||
{ label: 'Using JavaScript', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What does the 'alt' attribute in an HTML image do?",
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "It defines the image's source URL", is_correct: false },
|
||||
{ label: "It specifies the image's width", is_correct: false },
|
||||
{ label: 'It provides alternative text for the image', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to provide a text description for an image for accessibility?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'title', is_correct: false },
|
||||
{ label: 'alt', is_correct: true },
|
||||
{ label: 'description', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you make an image a clickable link?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Wrap the image in an <a> element', is_correct: true },
|
||||
{ label: "Use the 'href' attribute on the <img> element", is_correct: false },
|
||||
{ label: "Add an 'onclick' attribute to the image", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'title' attribute in an HTML image?",
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "It defines the image's title", is_correct: false },
|
||||
{ label: 'It provides a tooltip text for the image', is_correct: true },
|
||||
{ label: "It sets the image's width", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML element is used to define a clickable area within an image?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<area>', is_correct: true },
|
||||
{ label: '<map>', is_correct: false },
|
||||
{ label: '<link>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What does the 'usemap' attribute in an HTML image do?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "It specifies the image's source URL", is_correct: false },
|
||||
{ label: 'It links to an external map file', is_correct: false },
|
||||
{ label: 'It defines an image map to be used', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to set the initial width of an image in pixels?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'width', is_correct: true },
|
||||
{ label: 'height', is_correct: false },
|
||||
{ label: 'size', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,137 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Favicon Quiz',
|
||||
description: 'Test your knowledge of HTML favicons',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of a favicon in an HTML document?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To set the background color of the web page', is_correct: false },
|
||||
{ label: "To specify the website's title", is_correct: false },
|
||||
{ label: 'To provide a small icon for the browser tab', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML element is used to define a favicon?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<icon>', is_correct: false },
|
||||
{ label: '<favicon>', is_correct: false },
|
||||
{ label: '<link>', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the recommended size for a favicon image?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '16x16 pixels', is_correct: true },
|
||||
{ label: '32x32 pixels', is_correct: false },
|
||||
{ label: '64x64 pixels', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Where should you place the <link> element for the favicon in an HTML document?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'In the <body> section', is_correct: false },
|
||||
{ label: 'In the <footer> section', is_correct: false },
|
||||
{ label: 'In the <head> section', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which file format is commonly used for favicons?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '.ico', is_correct: true },
|
||||
{ label: '.jpg', is_correct: false },
|
||||
{ label: '.png', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you specify a favicon for different devices with different sizes?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Use multiple <link> elements with different sizes', is_correct: true },
|
||||
{ label: 'Specify the size in the <img> element', is_correct: false },
|
||||
{ label: 'Use JavaScript to detect the device size', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'sizes' attribute in a favicon <link> element?",
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To set the background color of the favicon', is_correct: false },
|
||||
{ label: 'To specify the dimensions of the favicon image', is_correct: true },
|
||||
{ label: 'To define the shape of the favicon', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What should you do if a browser does not support favicons?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Use a larger image in the <body> section', is_correct: false },
|
||||
{ label: 'Include a text-based alternative in the <head> section', is_correct: false },
|
||||
{ label: 'Do nothing; modern browsers all support favicons', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the default name for a favicon file?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'favicon.ico', is_correct: true },
|
||||
{ label: 'icon.png', is_correct: false },
|
||||
{ label: 'favicon.png', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'rel' attribute in a favicon <link> element?",
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To specify the relationship between the favicon and the website',
|
||||
is_correct: true
|
||||
},
|
||||
{ label: 'To set the background color of the favicon', is_correct: false },
|
||||
{ label: 'To define the dimensions of the favicon image', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,135 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Page Title Quiz',
|
||||
description: 'Test your knowledge of HTML page titles',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML element is used to specify the title of a web page?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<head>', is_correct: false },
|
||||
{ label: '<title>', is_correct: true },
|
||||
{ label: '<body>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Where should you place the <title> element in an HTML document?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'In the <body> section', is_correct: false },
|
||||
{ label: 'In the <footer> section', is_correct: false },
|
||||
{ label: 'In the <head> section', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the <title> element?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "To specify the website's background color", is_correct: false },
|
||||
{ label: "To set the website's font style", is_correct: false },
|
||||
{ label: "To define the title displayed in the browser's title bar", is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can you have multiple <title> elements in a single HTML document?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Yes, but only one will be displayed', is_correct: false },
|
||||
{ label: 'No, there can be only one <title> element', is_correct: true },
|
||||
{ label: 'Yes, all of them will be displayed', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to provide alternative text for an <img> element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'alt', is_correct: true },
|
||||
{ label: 'title', is_correct: false },
|
||||
{ label: 'src', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How should you format the text inside the <title> element?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'In UPPERCASE letters', is_correct: false },
|
||||
{ label: 'In Sentence case', is_correct: true },
|
||||
{ label: 'In lowercase letters', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the maximum length of the text you can put inside a <title> element?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '255 characters', is_correct: false },
|
||||
{ label: '512 characters', is_correct: false },
|
||||
{ label: 'Depends on the browser', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of setting a page title?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "To specify the page's background color", is_correct: false },
|
||||
{ label: "To define the page's layout", is_correct: false },
|
||||
{ label: 'To provide a meaningful title for the web page', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the HTML tag used to display the page title in the browser's title bar?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<h1>', is_correct: false },
|
||||
{ label: '<p>', is_correct: false },
|
||||
{ label: '<title>', is_correct: false },
|
||||
{ label: '<head>', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the recommended length for a page title?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '1-3 words', is_correct: false },
|
||||
{ label: '3-5 words', is_correct: true },
|
||||
{ label: 'Unlimited length', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,137 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Tables Quiz',
|
||||
description: 'Test your knowledge of HTML tables',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML tag is used to create a table?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<table>', is_correct: true },
|
||||
{ label: '<tr>', is_correct: false },
|
||||
{ label: '<td>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a table row?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<table>', is_correct: false },
|
||||
{ label: '<tr>', is_correct: true },
|
||||
{ label: '<td>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the <th> element in an HTML table?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To create a new table', is_correct: false },
|
||||
{ label: 'To define a table header cell', is_correct: true },
|
||||
{ label: 'To define a table data cell', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a table data cell?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<th>', is_correct: false },
|
||||
{ label: '<td>', is_correct: true },
|
||||
{ label: '<tr>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What attribute is used to define the alignment of the content inside a table cell?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'align', is_correct: false },
|
||||
{ label: 'valign', is_correct: false },
|
||||
{ label: 'style', is_correct: false },
|
||||
{ label: 'text-align', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you create a border around an HTML table?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Using the <border> element', is_correct: false },
|
||||
{ label: "Setting the border attribute to '1'", is_correct: true },
|
||||
{ label: 'Using the <table-border> element', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to specify the width of a table border?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'border-width', is_correct: false },
|
||||
{ label: 'border-style', is_correct: false },
|
||||
{ label: 'border-color', is_correct: false },
|
||||
{ label: 'border', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What HTML tag is used to create a table header cell?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<th>', is_correct: true },
|
||||
{ label: '<td>', is_correct: false },
|
||||
{ label: '<tr>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you add a caption to an HTML table?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Using the <caption> element', is_correct: true },
|
||||
{ label: 'Using the <header> element', is_correct: false },
|
||||
{ label: 'Using the <caption-text> element', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to specify the background color of a table?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'bgcolor', is_correct: false },
|
||||
{ label: 'background-color', is_correct: true },
|
||||
{ label: 'table-color', is_correct: false },
|
||||
{ label: 'color', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,130 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Lists Quiz',
|
||||
description: 'Test your knowledge of HTML lists',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML tag is used to create an unordered list?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<ul>', is_correct: true },
|
||||
{ label: '<ol>', is_correct: false },
|
||||
{ label: '<li>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does HTML stand for?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a numbered list?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<ul>', is_correct: false },
|
||||
{ label: '<ol>', is_correct: true },
|
||||
{ label: '<li>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a nested list in HTML?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'By using multiple <ul> elements', is_correct: false },
|
||||
{ label: 'By using multiple <ol> elements', is_correct: false },
|
||||
{ label: 'By using the <li> element within another <li> element', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to start counting the list items from a specific number?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'start', is_correct: true },
|
||||
{ label: 'begin', is_correct: false },
|
||||
{ label: 'value', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What HTML tag is used to define the description list?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<dl>', is_correct: true },
|
||||
{ label: '<ul>', is_correct: false },
|
||||
{ label: '<ol>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define the term in a description list?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<dt>', is_correct: true },
|
||||
{ label: '<dd>', is_correct: false },
|
||||
{ label: '<dl>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define the description in a description list?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<dt>', is_correct: false },
|
||||
{ label: '<dd>', is_correct: true },
|
||||
{ label: '<dl>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a horizontal list?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'By using the <ul> element', is_correct: false },
|
||||
{ label: 'By using the <ol> element', is_correct: false },
|
||||
{ label: 'By using the <li> element with CSS styling', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define an item in a list?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<ul>', is_correct: false },
|
||||
{ label: '<ol>', is_correct: false },
|
||||
{ label: '<li>', is_correct: true }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,122 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Blocks Quiz',
|
||||
description: 'Test your knowledge of HTML blocks',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which HTML tag is used to define an HTML block?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<block>', is_correct: false },
|
||||
{ label: '<div>', is_correct: true },
|
||||
{ label: '<section>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML <div> element?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a paragraph?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<p>', is_correct: true },
|
||||
{ label: '<paragraph>', is_correct: false },
|
||||
{ label: '<par>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you make text bold in HTML?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'By using the <strong> tag', is_correct: true },
|
||||
{ label: 'By using the <bold> tag', is_correct: false },
|
||||
{ label: 'By using CSS styling', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML <section> element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a line break?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<lb>', is_correct: false },
|
||||
{ label: '<break>', is_correct: false },
|
||||
{ label: '<br>', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a hyperlink in HTML?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'By using the <a> tag', is_correct: true },
|
||||
{ label: 'By using the <link> tag', is_correct: false },
|
||||
{ label: 'By using the <hyperlink> tag', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML <aside> element?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to define a blockquote?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<quote>', is_correct: false },
|
||||
{ label: '<blockquote>', is_correct: true },
|
||||
{ label: '<q>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the HTML <hr> element represent?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A horizontal rule or thematic break', is_correct: true },
|
||||
{ label: 'A hyperlink reference', is_correct: false },
|
||||
{ label: 'A header element', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,146 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Classes Quiz',
|
||||
description: 'Test your knowledge of HTML classes',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the HTML class attribute?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To define a CSS class for styling',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To define a JavaScript function',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create a new HTML element',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you apply a class to an HTML element?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Using the id attribute',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Using the name attribute',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Using the class attribute',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which character is used to separate multiple class names in the class attribute?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: ', (comma)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '. (period)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'space',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you select an element with a specific class using CSS?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of using multiple classes on an HTML element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you apply multiple classes to an HTML element?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the syntax for selecting elements with a specific class using JavaScript?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What does the following CSS rule do: .my-class { color: red; }',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you remove a class from an HTML element using JavaScript?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the :not() pseudo-class in CSS?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'To select elements that do not match a given selector',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To select all elements',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To select child elements',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,129 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML ID Quiz',
|
||||
description: 'Test your knowledge of HTML ID attributes',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the HTML id attribute?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To define a class for styling',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To define a JavaScript function',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To uniquely identify an HTML element',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can multiple HTML elements have the same id?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Yes',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'No',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you select an element with a specific id using CSS?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML name attribute?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How do you apply an id to an HTML element?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the syntax for selecting elements with a specific id using JavaScript?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML data-* attribute?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'To store custom data private to the page or application',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To define a CSS class',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To define JavaScript functions',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the difference between id and class attributes in HTML?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the HTML for attribute?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you remove an id from an HTML element using JavaScript?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,181 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Iframes Quiz',
|
||||
description: 'Test your knowledge of HTML iframes',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What does HTML stand for?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Hypertext Markup Language',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Hyperlink and Text Markup Language',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Highly Textual Markup Language',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of an iframe element?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'To embed external web content within a web page',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create a hyperlink to another webpage',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To format text and images on a web page',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to specify the source URL of an iframe?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What happens if the src attribute of an iframe is empty?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'The iframe displays an error message',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The iframe is hidden',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The iframe remains blank',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which attribute is used to specify the width of an iframe?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Can an iframe display content from a different domain?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Yes, always',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'No, never',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Yes, if the external domain allows it through CORS',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the frameborder attribute in an iframe?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'To specify the border width',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To allow or disallow scrolling',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To control the display of a border around the iframe',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the allowfullscreen attribute in an iframe?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{
|
||||
label: 'To enable or disable fullscreen mode',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To allow the embedded content to be displayed in fullscreen mode',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What does the term 'sandboxing' refer to in iframes?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the default value of the scrolling attribute in an iframe?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{
|
||||
label: 'Auto',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Yes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'No',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,45 +0,0 @@
|
||||
export const HTML_IDS: { [key: string]: string } = {
|
||||
HTML_ELEMENTS: 'HTML_ELEMENTS',
|
||||
HTML_ATTRIBUTES: 'HTML_ATTRIBUTES',
|
||||
HTML_HEADINGS: 'HTML_HEADINGS',
|
||||
HTML_PARAGRAPH: 'HTML_PARAGRAPH',
|
||||
HTML_STYLES: 'HTML_STYLES',
|
||||
HTML_FORMATTING: 'HTML_FORMATTING',
|
||||
HTML_QUOTATIONS: 'HTML_QUOTATIONS',
|
||||
HTML_COMMENTS: 'HTML_COMMENTS',
|
||||
HTML_COLORS: 'HTML_COLORS',
|
||||
HTML_CSS: 'HTML_CSS',
|
||||
HTML_LINKS: 'HTML_LINKS',
|
||||
HTML_IMAGES: 'HTML_IMAGES',
|
||||
HTML_FAVICON: 'HTML_FAVICON',
|
||||
HTML_PAGETITLE: 'HTML_PAGETITLE',
|
||||
HTML_TABLES: 'HTML_TABLES',
|
||||
HTML_LISTS: 'HTML_LISTS',
|
||||
HTML_BLOCKS: 'HTML_BLOCKS',
|
||||
HTML_CLASSES: 'HTML_CLASSES',
|
||||
HTML_ID: 'HTML_ID',
|
||||
HTML_IFRAMES: 'HTML_IFRAMES'
|
||||
};
|
||||
|
||||
export const HTML_TEMPLATES = {
|
||||
[HTML_IDS.HTML_ELEMENTS]: async () => (await import('./001_html_elements')).default,
|
||||
[HTML_IDS.HTML_ATTRIBUTES]: async () => (await import('./002_html_attributes')).default,
|
||||
[HTML_IDS.HTML_HEADINGS]: async () => (await import('./003_html_headings')).default,
|
||||
[HTML_IDS.HTML_PARAGRAPH]: async () => (await import('./004_html_paragraph')).default,
|
||||
[HTML_IDS.HTML_STYLES]: async () => (await import('./005_html_styles')).default,
|
||||
[HTML_IDS.HTML_FORMATTING]: async () => (await import('./006_html_formatting')).default,
|
||||
[HTML_IDS.HTML_QUOTATIONS]: async () => (await import('./007_html_quotations')).default,
|
||||
[HTML_IDS.HTML_COMMENTS]: async () => (await import('./008_html_comments')).default,
|
||||
[HTML_IDS.HTML_COLORS]: async () => (await import('./009_html_colors')).default,
|
||||
[HTML_IDS.HTML_CSS]: async () => (await import('./010_html_css')).default,
|
||||
[HTML_IDS.HTML_LINKS]: async () => (await import('./011_html_links')).default,
|
||||
[HTML_IDS.HTML_IMAGES]: async () => (await import('./012_html_images')).default,
|
||||
[HTML_IDS.HTML_FAVICON]: async () => (await import('./013_html_favicon')).default,
|
||||
[HTML_IDS.HTML_PAGETITLE]: async () => (await import('./014_html_pageTitle')).default,
|
||||
[HTML_IDS.HTML_TABLES]: async () => (await import('./015_html_tables')).default,
|
||||
[HTML_IDS.HTML_LISTS]: async () => (await import('./016_html_lists')).default,
|
||||
[HTML_IDS.HTML_BLOCKS]: async () => (await import('./017_html_blocks')).default,
|
||||
[HTML_IDS.HTML_CLASSES]: async () => (await import('./018_html_classes')).default,
|
||||
[HTML_IDS.HTML_ID]: async () => (await import('./019_html_id')).default,
|
||||
[HTML_IDS.HTML_IFRAMES]: async () => (await import('./020_html_iframes')).default
|
||||
};
|
||||
@@ -1,91 +0,0 @@
|
||||
import { calculateTotalPoints, shuffleOptions } from './utils';
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
// Rule to add new template
|
||||
// The key and value must match
|
||||
// The template should have both `{VALUE}_IDS` and `{VALUE}_TEMPLATES`
|
||||
export const TAGS = {
|
||||
HTML: 'HTML',
|
||||
CSS: 'CSS',
|
||||
JS: 'JS',
|
||||
Typescript: 'Typescript',
|
||||
ReactJS: 'ReactJS',
|
||||
VueJS: 'VueJS',
|
||||
NodeJS: 'NodeJS',
|
||||
Python: 'Python',
|
||||
PHP: 'PHP',
|
||||
GIT: 'GIT'
|
||||
};
|
||||
|
||||
export interface GeneratedTemplates {
|
||||
[key: string]: LangTemplate[];
|
||||
}
|
||||
interface LangTemplate {
|
||||
id: string;
|
||||
title: string;
|
||||
questions: number;
|
||||
points: number;
|
||||
data: ExerciseTemplate;
|
||||
}
|
||||
|
||||
async function generateTemplateForTag(
|
||||
keys: { [key: string]: string },
|
||||
template: {
|
||||
[x: string]: () => ExerciseTemplate;
|
||||
}
|
||||
) {
|
||||
const templates: LangTemplate[] = [];
|
||||
|
||||
for (const key in keys) {
|
||||
const id = keys[key];
|
||||
const data = await template[id]();
|
||||
|
||||
data.questionnaire.questions = data.questionnaire.questions.map((q) => {
|
||||
q.options = shuffleOptions(q.options);
|
||||
return q;
|
||||
});
|
||||
templates.push({
|
||||
id,
|
||||
title: data.title,
|
||||
questions: data.questionnaire.questions.length,
|
||||
points: calculateTotalPoints(data),
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
return templates;
|
||||
}
|
||||
|
||||
export const getAllTemplates = async (): Promise<GeneratedTemplates> => {
|
||||
const templateModules = {
|
||||
HTML: await import('./html'),
|
||||
CSS: await import('./css'),
|
||||
JS: await import('./js'),
|
||||
Typescript: await import('./typescript'),
|
||||
ReactJS: await import('./react'),
|
||||
VueJS: await import('./vue'),
|
||||
NodeJS: await import('./node'),
|
||||
Python: await import('./python'),
|
||||
PHP: await import('./php'),
|
||||
GIT: await import('./git')
|
||||
};
|
||||
|
||||
const templates: GeneratedTemplates = {};
|
||||
|
||||
for (const tag in templateModules) {
|
||||
try {
|
||||
const module = templateModules[tag];
|
||||
const ids = module[`${tag.toUpperCase()}_IDS`];
|
||||
const templatesData = module[`${tag.toUpperCase()}_TEMPLATES`];
|
||||
if (!templatesData) {
|
||||
throw 'Templates not found';
|
||||
}
|
||||
|
||||
templates[tag] = await generateTemplateForTag(ids, templatesData);
|
||||
} catch (error) {
|
||||
console.error('error finding template', error);
|
||||
}
|
||||
}
|
||||
|
||||
return templates;
|
||||
};
|
||||
@@ -1,228 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Statements Quiz',
|
||||
description: 'Test your knowledge of JavaScript statements.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the correct JavaScript syntax for declaring a variable?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'variable x;',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'var x = 5;',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'int x;',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which statement is used to perform actions based on a condition?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'if',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'for',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'select',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of the following expression: 5 + "2"?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '7',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '52',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'undefined',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a correct way to comment out a single line of code in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX type
|
||||
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
|
||||
},
|
||||
{
|
||||
label: '## This is a comment',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "break" statement in a loop?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To exit the loop prematurely',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To continue to the next iteration of the loop',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To declare a variable',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you define a function in JavaScript?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'function myFunction()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'def myFunction():',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'method myFunction():',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which statement is used to stop the execution of a function and return a value?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'return',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'stop',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'break',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a multiline comment in JavaScript?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '/* This is a multiline comment */',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '// This is a multiline comment',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '## This is a multiline comment',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the correct way to write an if statement in JavaScript?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'if (x == 5) {',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'if x == 5:',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'if x = 5;',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which JavaScript statement is used to declare a variable?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'var',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'int',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'variable',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Syntax Quiz',
|
||||
description: 'Test your knowledge of JavaScript syntax.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What symbol is used for comments in JavaScript?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '//',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '--',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '/* */',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you declare a variable in JavaScript?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'var',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'int',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'variable',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a correct way to assign a value to a variable in JavaScript?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'x = 5;',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'x := 5;',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'x <- 5;',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the correct way to write an if statement in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'if (x == 5) {',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'if x == 5:',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'if x = 5;',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a valid JavaScript string?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '"Hello, World!"',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: "'Hello, World!'",
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '`Hello, World!`',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the operator "===" do in JavaScript?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Strict equality (equal value and equal type)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Assigns a value to a variable',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Checks if a variable exists',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you write a for loop in JavaScript?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'for (var i = 0; i < 5; i++) {',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'for i in range(5):',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'loop (var i = 0; i < 5; i++) {',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you write a function in JavaScript?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'function myFunction() {',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'def myFunction():',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'method myFunction():',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "return" statement in a function?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To specify the value to be returned from the function',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To terminate the function immediately',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To declare a new variable',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used for string concatenation in JavaScript?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '+',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '&',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '|',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,220 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Comments Quiz',
|
||||
description: 'Test your knowledge of JavaScript comments.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the correct way to add a single-line comment in JavaScript?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
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 add a multi-line comment in JavaScript?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '/* This is a multi-line comment */',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '// This is a multi-line comment',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '-- This is a multi-line comment',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is NOT a valid comment syntax in JavaScript?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '/? This is a comment',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '/* This is a comment',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '// This is a comment',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of comments in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To provide explanations and make the code more readable',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To hide code from other developers',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To execute code',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can comments be nested in JavaScript?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Yes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'No',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What happens to comments in JavaScript code when it's executed by a browser?",
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Comments are ignored and not executed',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Comments cause errors in the code',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Comments are executed like regular code',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of commenting out code in JavaScript?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To temporarily disable code',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To hide code from other developers',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To improve code performance',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which comment style is recommended for adding documentation comments in JavaScript?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'JSDoc style (/** ... */)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Single-line style (// ...)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Block comment style (/* ... */)',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "debugger" statement in JavaScript code?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To pause code execution and open the browser debugger',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To generate debugging logs',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To display a message in the console',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is NOT a recommended use of comments in JavaScript?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Adding explanations to code',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Hiding code from other developers',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Documenting functions and APIs',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,119 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'HTML Paragraphs Quiz',
|
||||
description: 'Test your knowledge of HTML paragraphs',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What HTML tag is used to define a paragraph?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 0,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<p>', is_correct: true },
|
||||
{ label: '<para>', is_correct: false },
|
||||
{ label: '<text>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you create a line break in HTML?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<br>', is_correct: true },
|
||||
{ label: '<lb>', is_correct: false },
|
||||
{ label: '<linebreak>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'align' attribute in the 'p' tag?",
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'To specify the font size', is_correct: false },
|
||||
{ label: 'To specify the text alignment', is_correct: true },
|
||||
{ label: 'To add a border around the paragraph', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML tag is used to create a preformatted text?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: '<pre>', is_correct: true },
|
||||
{ label: '<text>', is_correct: false },
|
||||
{ label: '<code>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you emphasize text in HTML?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: '<strong>', is_correct: true },
|
||||
{ label: '<em>', is_correct: true },
|
||||
{ label: '<b>', is_correct: false },
|
||||
{ label: '<i>', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "What is the purpose of the 'blockquote' element in HTML?",
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'To create a quotation', is_correct: true },
|
||||
{ label: 'To add a background color', is_correct: false },
|
||||
{ label: 'To insert an image', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Explain the use of the 'q' element in HTML.",
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you create a subscript text in HTML?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: "What does the 'cite' attribute in the 'blockquote' element specify?",
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you create a superscript text in HTML?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,216 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript "let" Quiz',
|
||||
description: 'Test your knowledge of the "let" keyword in JavaScript.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the "let" keyword in JavaScript?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To declare block-scoped variables',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To declare global variables',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To declare constant variables',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can you redeclare a variable declared with "let" in the same scope?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'No, redeclaration is not allowed',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Yes, redeclaration is allowed',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the scope of a variable declared with "let"?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Block scope',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Global scope',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Function scope',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following statements is true about "let" variables?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'They are hoisted to the top of the block',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'They are hoisted to the top of the function',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'They are not hoisted',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the initial value of a variable declared with "let"?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Undefined',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '0',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'null',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can you use a "let" variable before declaring it?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'No, it will result in a ReferenceError',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Yes, it will have an initial value of undefined',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which statement is used to declare a constant variable in JavaScript?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'const',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'var',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'let',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What happens if you try to reassign a constant variable?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'It will result in a TypeError',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'It will reassign the variable without an error',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It will throw a ReferenceError',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you declare a variable with block scope using "let"?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Enclose it in curly braces',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Use the "block" keyword',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Use the "scope" keyword',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'In which ECMAScript version was "let" introduced?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'ES6 (ECMAScript 2015)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'ES5 (ECMAScript 2009)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'ES7 (ECMAScript 2016)',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,220 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript "const" Quiz',
|
||||
description: 'Test your knowledge of the "const" keyword in JavaScript.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of the "const" keyword in JavaScript?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To declare constants with block scope',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To declare constants with function scope',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To declare constants with block scope that cannot be reassigned',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can you reassign a variable declared with "const"?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Yes, you can reassign it',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'No, it cannot be reassigned',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What happens if you try to reassign a "const" variable?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'It will result in a ReferenceError',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'It will reassign the variable without an error',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It will throw a TypeError',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'When should you use the "const" keyword in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'For variables that will be reassigned frequently',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'For variables that should not be reassigned',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'For all variables in your code',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is true about "const" variables?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'They have block scope',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'They have function scope',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'They have block scope and cannot be reassigned',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Can you declare a "const" variable without initializing it?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'No, you must initialize it when declaring',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Yes, it will have an initial value of undefined',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the initial value of a "const" variable?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Undefined',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '0',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'null',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It must be initialized with a value',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'In which ECMAScript version was "const" introduced?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'ES6 (ECMAScript 2015)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'ES5 (ECMAScript 2009)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'ES7 (ECMAScript 2016)',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the scoping behavior of "const" variables?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'They have block scope',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'They have global scope',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'They have function scope',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is NOT a valid way to declare a "const" variable?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'const myVar = 10;',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'const myVar;',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'const myVar = "Hello";',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,212 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Operators Quiz',
|
||||
description: 'Test your knowledge of JavaScript operators.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the result of 5 + 3?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '5',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '8',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '53',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used for string concatenation in JavaScript?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '+',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '-',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '*',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of "10" - 5?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '10',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '5',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '5 (as a number)',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used to find the remainder of a division?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '+',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '-',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '%',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of "20" == 20?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'true',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'false',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used to compare if two values are equal without type conversion?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '==',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '===',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '!=',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of 5 > 3 && 2 < 4?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'true',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'false',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used to assign a value to a variable?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '=',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '==',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '===',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of true || false?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'true',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'false',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used for the logical NOT?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '&&',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '!',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '||',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,212 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Arithmetic Operators Quiz',
|
||||
description: 'Test your knowledge of JavaScript arithmetic operators.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the result of 5 + 3?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '5',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '8',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '53',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used for string concatenation in JavaScript?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '+',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '-',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '*',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of "10" - 5?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '10',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '5',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '5 (as a number)',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used to find the remainder of a division?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '+',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '-',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '%',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of "20" == 20?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'true',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'false',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used to compare if two values are equal without type conversion?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '==',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '===',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '!=',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of 5 > 3 && 2 < 4?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'true',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'false',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used to assign a value to a variable?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '=',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '==',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '===',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of true || false?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'true',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'false',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used for the logical NOT?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '&&',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '!',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '||',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Assignment Operators Quiz',
|
||||
description: 'Test your knowledge of JavaScript assignment operators.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the result of x = 5, where x is a variable?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'x = 5',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '5',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Undefined',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used for addition and assignment?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '+=',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '=+',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '==',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the value of x after the operation x *= 2 if x is initially 3?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '3',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '6',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '2',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used for subtraction and assignment?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '-=',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '=+',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '--',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of x %= 3, where x is initially 8?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '2',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '0',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used for division and assignment?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '/=',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '==',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '//=',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of y **= 2, where y is initially 4?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '16',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '8',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '6',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used for exponentiation and assignment?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '**=',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '^=',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '^^=',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the value of x after the operation x &= 3, where x is initially 5?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '5',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '3',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '0',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used for bitwise AND and assignment?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '&=',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '==',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '&&=',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Data Types Quiz',
|
||||
description: 'Test your knowledge of JavaScript data types.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the data type of the value "Hello, World!"?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'String',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Number',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Boolean',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you declare a variable in JavaScript?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'var variableName;',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'variable variableName;',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'let variableName;',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the data type of the value 42?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'String',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Number',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Boolean',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which operator is used to concatenate strings in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '+',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '&',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '|',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the data type of the value true?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'String',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Number',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Boolean',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you declare a constant variable in JavaScript?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'const variableName;',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'let variableName;',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'var variableName;',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the data type of the value null?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'String',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Number',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Object',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the data type of the value undefined?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'String',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Number',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Undefined',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the data type of the value [1, 2, 3]?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'String',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Array',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Object',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you comment a single line in JavaScript?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,228 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Functions Quiz',
|
||||
description: 'Test your knowledge of JavaScript functions.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of a JavaScript function?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To declare variables',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To define classes',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To group code into reusable blocks',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you declare a named JavaScript function?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'function myFunction() {}',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'const myFunction = () => {}',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'const myFunction = function() {}',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which keyword is used to call a JavaScript function?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'return',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'function',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'call',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'invoke',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the syntax for defining an anonymous function in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'function() {}',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'const myFunction = () => {}',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'const myFunction = function() {}',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is a function parameter in JavaScript?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'A variable defined within a function',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A value passed into a function when it is called',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A function declared inside another function',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the "return" statement do in a JavaScript function?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'It ends the function execution',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It defines a variable',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It specifies the value to be returned from the function',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the scope of a variable declared with "var" inside a function?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Function scope (local)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Global scope',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Block scope',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which keyword is used to define a function in JavaScript?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'function',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'declare',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'method',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is a callback function in JavaScript?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'A function that is called automatically',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A function passed as an argument to another function',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A function used for mathematical calculations',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you call a function named "myFunction" in JavaScript?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'myFunction()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'call myFunction()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'invoke myFunction()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Objects Quiz',
|
||||
description: 'Test your knowledge of JavaScript objects.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is an object in JavaScript?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'A data type that holds a single value',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A collection of key-value pairs',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A loop in JavaScript',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create an empty object in JavaScript?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'object()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '{}',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'new Object()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the syntax for accessing an object property?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'object.property',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'object->property',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'object[property]',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you add a new property to an existing object in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'object.newProperty = value;',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'object.addProperty(value);',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'object[propertyName] = value;',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a valid way to remove a property from an object?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'delete object.propertyName;',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'object.removeProperty(propertyName);',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'object.propertyName = null;',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is a JavaScript constructor function used for?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To define methods for an object',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create multiple objects with the same structure',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To perform mathematical calculations',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you access the number of properties in an object?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'object.length',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'object.size()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Object.keys(object).length',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "this" keyword in an object method?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To refer to the next object in the chain',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To refer to the current object that the method belongs to',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To access global variables',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a valid way to create an object method?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'function myMethod() {}',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'const myMethod = function() {};',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'myMethod: function() {}',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you access the value of a nested object property?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'object.nestedProperty',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'object->nestedProperty',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'object[nestedProperty]',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Events Quiz',
|
||||
description: 'Test your knowledge of JavaScript events.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is an event in JavaScript?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'A function that performs a mathematical operation',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A user action or occurrence that triggers a response in a web page',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A data structure in JavaScript',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is not an example of a JavaScript event?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Clicking a button',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Pressing a key',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Declaring a variable',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you attach an event handler to an HTML element?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Using the "setEventHandler" method',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Using the "addEventListener" method',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Using the "handleEvent" attribute',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "event.preventDefault()" method in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To stop the event from occurring',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To prevent the default behavior of an event',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To trigger an event manually',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTML attribute is used to specify the JavaScript code to run when an event occurs?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'onclick',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'js-code',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'event-handler',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is event propagation in JavaScript?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'The process of handling multiple events simultaneously',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The flow of events from the target element to the root element and back',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The process of attaching event handlers to elements',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which method is used to remove an event listener from an element in JavaScript?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'removeEventListener()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'detachEventListener()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'unbindEvent()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is event delegation in JavaScript?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'The process of creating new events',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The process of handling events using delegation',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The process of handling events on a parent element for child elements',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is NOT a valid event type in JavaScript?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'click',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'hover',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'keydown',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "event.stopPropagation()" method in JavaScript?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To start event propagation',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To prevent the default behavior of an event',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To stop the event from propagating to parent elements',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Strings Quiz',
|
||||
description: 'Test your knowledge of JavaScript strings.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is a string in JavaScript?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'A sequence of characters enclosed in double quotes',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A numeric data type',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A Boolean data type',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you declare a string variable in JavaScript?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'string x = "Hello";',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'var x = "Hello";',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'let x = "Hello";',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which method is used to find the length of a string in JavaScript?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'length()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'size()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'length',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of "Hello" + "World" in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Hello',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'World',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'HelloWorld',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which method is used to convert a string to lowercase in JavaScript?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'toLowerCase()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'toLowercase()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'lowerCase()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the index of the first occurrence of "world" in the string "Hello world"?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '0',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '5',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '6',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which method is used to extract a part of a string in JavaScript?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'substring()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'slice()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'splice()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the escape character in JavaScript?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '\\',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '/',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '!',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is NOT a valid method to manipulate strings in JavaScript?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'toUpperCase()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'replace()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'split()',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of the expression 10 + "20" in JavaScript?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '1020',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '30',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Error',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,227 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript String Methods Quiz',
|
||||
description: 'Test your knowledge of JavaScript string methods.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which string method is used to extract a specific number of characters from a string?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'substr()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'substring()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'slice()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which string method is used to replace a specified value with another value in a string?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'replace()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'replaceAll()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'substitute()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which method is used to concatenate two or more strings in JavaScript?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'concat()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'join()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'merge()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the `trim()` method in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To remove whitespace from the beginning and end of a string',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To add whitespace to a string',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To split a string into an array',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Which string method is used to convert a string to an array of substrings based on a specified separator?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'split()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'divide()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'segment()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the `charAt()` method in JavaScript return?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'The character at a specified index',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The length of the string',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A substring of the string',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which string method is used to convert a string to uppercase letters?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'toUpperCase()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'toUppercase()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'upperCase()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the `charAt()` method in JavaScript?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To retrieve the character at a specified index in a string',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To remove characters from a string',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To concatenate two strings',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Which string method is used to extract the characters from a string, between two specified indices, and returns the new string?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'substring()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'slice()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'splice()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:
|
||||
'What is the return value of the `indexOf()` method if the specified substring is not found in the string?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '-1',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '0',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,226 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript String Search Quiz',
|
||||
description: 'Test your knowledge of JavaScript string search methods.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which JavaScript method is used to search for a specified value in a string?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'search()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'find()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'locate()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the `search()` method return when it finds a match in the string?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'The index of the first occurrence of the match',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A boolean value (true or false)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The matched substring',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which parameter of the `search()` method specifies the regular expression pattern to be searched for?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'The regular expression pattern',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The search string',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The start position of the search',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the `search()` method return if the specified value is not found in the string?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '-1',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '0',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'null',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Which of the following is a valid example of using the `search()` method with a regular expression pattern?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '/pattern/.search("text")',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'search("pattern", /text/)',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '"text".search(/pattern/)',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Which JavaScript method is used to search for a specified value in a string and replace it with another value?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'replace()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'searchAndReplace()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'findAndReplace()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the `replace()` method return after replacing the specified value in a string?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'A new string with the replacements',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'The index of the replaced value',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A boolean value (true or false)',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How can you perform a global search and replacement using the `replace()` method?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'By using a regular expression with the global flag (e.g., /pattern/g)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By specifying the index of the occurrence to replace',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By using the `replaceAll()` method instead',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the `replace()` method do if the specified value is not found in the string?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Leaves the string unchanged',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Throws an error',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Replaces the value with null',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which JavaScript method is used to perform a case-insensitive search and replacement?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'By using a regular expression with the "i" flag (e.g., /pattern/i)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By converting the string to lowercase before using the `replace()` method',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By using the `caseInsensitiveReplace()` method',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,227 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript String Templates Quiz',
|
||||
description: 'Test your knowledge of JavaScript string templates.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the purpose of JavaScript string templates (template literals)?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To create strings with embedded expressions',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To create multiline strings',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To create string arrays',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which syntax is used to create a JavaScript string template (template literal)?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Backticks (` `)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: "Single quotes (' ')",
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Double quotes (" ")',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the syntax for embedding an expression inside a JavaScript string template?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '${expression}',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '{{expression}}',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '%%expression%%',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'In a JavaScript string template, can you embed multiple expressions within a single template?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Yes, you can embed multiple expressions within a single template.',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'No, only one expression is allowed per template.',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Yes, but expressions must be enclosed in double braces {{ }}.',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a valid example of a JavaScript string template with an embedded expression?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'const name = "Alice";\nconst greeting = `Hello, ${name}!`;',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'const name = "Alice";\nconst greeting = "Hello, ${name}!";',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'const name = "Alice";\nconst greeting = "Hello, ${name}!";',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the advantage of using JavaScript string templates over traditional string concatenation?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Easier to read and maintain',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Faster performance',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Supports more data types',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:
|
||||
'In a JavaScript string template, can you include line breaks (multiline text) without escaping characters?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Yes, you can include line breaks without escaping characters.',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'No, line breaks must be escaped with \\n.',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Yes, but line breaks must be enclosed in double braces {{ }}.',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which character is used for escaping within a JavaScript string template?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '\\',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '/',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '^',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:
|
||||
'What is the result of evaluating the following JavaScript string template?\n\n```\nconst x = 5;\nconst result = `The value of x is ${x * 2}`;\n```',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'The value of result is "The value of x is 10".',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'An error occurs because expressions cannot be used in string templates.',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The value of result is "The value of x is 5 * 2".',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Which method is used to trim whitespace from the beginning and end of a string within a JavaScript string template?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'trim()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'trimEnd()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'trimStart()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,224 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Numbers Quiz',
|
||||
description: 'Test your knowledge of JavaScript numbers.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which of the following is a valid way to represent a number in JavaScript?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '12345',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '"12345"',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: "'12345'",
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the maximum value for a number in JavaScript?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Number.MAX_VALUE',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Infinity',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'There is no maximum value.',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of dividing by zero in JavaScript?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Infinity',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'NaN',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '0',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the `isNaN()` function in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To check if a value is not a number',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To check if a value is negative',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To check if a value is infinite',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following represents a floating-point number in JavaScript?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '3.14',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '42',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '0xFF',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of the expression `0.1 + 0.2` in JavaScript?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '0.3',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '0.30000000000000004',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '0.2',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the `parseInt()` function in JavaScript?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To parse a string and convert it to an integer',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To round a decimal number to the nearest integer',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To check if a value is positive',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of the expression `Math.random()` in JavaScript?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'A random number between 0 (inclusive) and 1 (exclusive)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A random integer between 0 and 100',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'The value of pi (π)',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the `toFixed()` method in JavaScript?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To format a number with a specified number of decimal places',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To convert a number to a string',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To round a number to the nearest integer',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the value of `NaN` in JavaScript?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Not-a-Number',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Zero',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Infinity',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,232 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript BigInt Quiz',
|
||||
description: 'Test your knowledge of JavaScript BigInt.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which of the following is used to create a BigInt in JavaScript?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: '12345n',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '12345',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: '"12345"',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the primary use of BigInt in JavaScript?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To represent large integers that exceed the limits of regular numbers',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To perform bitwise operations',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To store decimal fractions',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following operators can be used with BigInt?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1], // CHECKBOX type
|
||||
options: [
|
||||
{
|
||||
label: '+',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '-',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '*',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: '/',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of adding a BigInt and a regular number in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'A BigInt',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A regular number',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'A string',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you convert a BigInt to a regular number in JavaScript?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'By using the `Number()` function',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By using the `.valueOf()` method',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By using the `parseInt()` function',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the `BigInt.asUintN()` method in JavaScript?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'To convert a BigInt to an unsigned integer of a specified bit length',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'To perform bitwise AND operations on BigInts',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'To convert a BigInt to a regular number',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of the expression `2n ** 53n` in JavaScript?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'A BigInt representing 2 to the power of 53',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'A regular number',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'An error',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you create a BigInt from a string in JavaScript?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'By using the `BigInt()` constructor',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'By appending the letter "n" to the end of the string',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'By using the `parseInt()` function',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the value of `typeof 12345n` in JavaScript?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'bigint',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'number',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'string',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following statements is true regarding JavaScript BigInt?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[1], // CHECKBOX type
|
||||
options: [
|
||||
{
|
||||
label: 'It can represent arbitrarily large integers',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'It is supported in all JavaScript environments without limitations',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It is primarily used for representing decimal fractions',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'It can be used with all arithmetic operators',
|
||||
is_correct: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,220 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'JavaScript Number Methods Quiz',
|
||||
description: 'Test your knowledge of JavaScript Number Methods.',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'Which JavaScript method returns the smallest integer greater than or equal to a given number?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Math.floor()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Math.ceil()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Math.round()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the `toFixed()` method do in JavaScript?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Returns the number as a fixed-point notation string',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Returns the number rounded to the nearest integer',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Returns the square root of the number',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which JavaScript method parses a string and returns a floating-point number?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'parseFloat()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'parseInt()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Number()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the result of `Number.isNaN(NaN)` in JavaScript?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'true',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'false',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which JavaScript method converts a number to its exponential notation?',
|
||||
name: 'q5',
|
||||
points: 1,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'toExponential()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'toFixed()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'toPrecision()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the `isFinite()` method check for in JavaScript?',
|
||||
name: 'q6',
|
||||
points: 1,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Checks if a number is finite (not NaN, Infinity, or -Infinity)',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Checks if a number is a positive integer',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Checks if a number is even',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the `toString()` method do for a number in JavaScript?',
|
||||
name: 'q7',
|
||||
points: 1,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Returns the number as a string',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Rounds the number to the nearest integer',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Returns the square root of the number',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you check if a number is an integer in JavaScript?',
|
||||
name: 'q8',
|
||||
points: 1,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Using the `Number.isInteger()` method',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Using the `Math.round()` method',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Using the `Math.floor()` method',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which JavaScript method returns the largest integer less than or equal to a given number?',
|
||||
name: 'q9',
|
||||
points: 1,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Math.floor()',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Math.ceil()',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Math.round()',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the `Number.toPrecision()` method do in JavaScript?',
|
||||
name: 'q10',
|
||||
points: 1,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO type
|
||||
options: [
|
||||
{
|
||||
label: 'Returns a string representing a number to a specified precision',
|
||||
is_correct: true
|
||||
},
|
||||
{
|
||||
label: 'Rounds the number to the nearest integer',
|
||||
is_correct: false
|
||||
},
|
||||
{
|
||||
label: 'Returns the square root of the number',
|
||||
is_correct: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,45 +0,0 @@
|
||||
export const JS_IDS: { [key: string]: string } = {
|
||||
JS_OUTPUT: 'JS_OUTPUT',
|
||||
JS_SYNTAX: 'JS_SYNTAX',
|
||||
JS_COMMENT: 'JS_COMMENT',
|
||||
JS_VARIABLES: 'JS_VARIABLES',
|
||||
JS_LET: 'JS_LET',
|
||||
JS_CONST: 'JS_CONST',
|
||||
JS_OPERATOR: 'JS_OPERATOR',
|
||||
JS_ARITHMETIC: 'JS_ARITHMETIC',
|
||||
JS_ASSIGNMENT: 'JS_ASSIGNMENT',
|
||||
JS_DATATYPES: 'JS_DATATYPES',
|
||||
JS_FUNCTIONS: 'JS_FUNCTIONS',
|
||||
JS_OBJECTS: 'JS_OBJECTS',
|
||||
JS_EVENTS: 'JS_EVENTS',
|
||||
JS_STRINGS: 'JS_STRINGS',
|
||||
JS_STRINGMETHODS: 'JS_STRINGMETHODS',
|
||||
JS_STRINGSEARCH: 'JS_STRINGSEARCH',
|
||||
JS_STRINGTEMPLATES: 'JS_STRINGTEMPLATES',
|
||||
JS_NUMBERS: 'JS_NUMBERS',
|
||||
JS_BIGINT: 'JS_BIGINT',
|
||||
JS_NUMBERMETHODS: 'JS_NUMBERMETHODS'
|
||||
};
|
||||
|
||||
export const JS_TEMPLATES = {
|
||||
[JS_IDS.JS_OUTPUT]: async () => (await import('./001_js_statements')).default,
|
||||
[JS_IDS.JS_SYNTAX]: async () => (await import('./002_js_syntax')).default,
|
||||
[JS_IDS.JS_COMMENT]: async () => (await import('./003_js_comments')).default,
|
||||
[JS_IDS.JS_VARIABLES]: async () => (await import('./004_js_variables')).default,
|
||||
[JS_IDS.JS_LET]: async () => (await import('./005_js_let')).default,
|
||||
[JS_IDS.JS_CONST]: async () => (await import('./006_js_const')).default,
|
||||
[JS_IDS.JS_OPERATOR]: async () => (await import('./007_js_operators')).default,
|
||||
[JS_IDS.JS_ARITHMETIC]: async () => (await import('./008_js_arithmetic')).default,
|
||||
[JS_IDS.JS_ASSIGNMENT]: async () => (await import('./009_js_assignment')).default,
|
||||
[JS_IDS.JS_DATATYPES]: async () => (await import('./010_js_dataTypes')).default,
|
||||
[JS_IDS.JS_FUNCTIONS]: async () => (await import('./011_js_functions')).default,
|
||||
[JS_IDS.JS_OBJECTS]: async () => (await import('./012_js_objects')).default,
|
||||
[JS_IDS.JS_EVENTS]: async () => (await import('./013_js_events')).default,
|
||||
[JS_IDS.JS_STRINGS]: async () => (await import('./014_js_strings')).default,
|
||||
[JS_IDS.JS_STRINGMETHODS]: async () => (await import('./015_js_stringMethods')).default,
|
||||
[JS_IDS.JS_STRINGSEARCH]: async () => (await import('./016_stringSearch')).default,
|
||||
[JS_IDS.JS_STRINGTEMPLATES]: async () => (await import('./017_js_stringTemplates')).default,
|
||||
[JS_IDS.JS_NUMBERS]: async () => (await import('./018_js_numbers')).default,
|
||||
[JS_IDS.JS_BIGINT]: async () => (await import('./019_js_bigInt')).default,
|
||||
[JS_IDS.JS_NUMBERMETHODS]: async () => (await import('./020_js_numberMethods')).default
|
||||
};
|
||||
@@ -1,128 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Node.js Modules Quiz',
|
||||
description: 'Test your knowledge of Node.js modules from W3Schools',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is a Node.js module?',
|
||||
name: 'q1',
|
||||
points: 2,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'A JavaScript file', is_correct: true },
|
||||
{ label: 'A Node.js package', is_correct: false },
|
||||
{ label: 'A built-in Node.js function', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you include a module in Node.js?',
|
||||
name: 'q2',
|
||||
points: 2,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "require('module_name')", is_correct: true },
|
||||
{ label: "import module_name from 'module'", is_correct: false },
|
||||
{ label: "import 'module_name'", is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a built-in Node.js module?',
|
||||
name: 'q3',
|
||||
points: 2,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'fs', is_correct: true },
|
||||
{ label: 'http', is_correct: true },
|
||||
{ label: 'express', is_correct: false },
|
||||
{ label: 'path', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you export a module in Node.js?',
|
||||
name: 'q4',
|
||||
points: 2,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'module.exports', is_correct: true },
|
||||
{ label: 'export default', is_correct: false },
|
||||
{ label: 'exports', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "exports" object in a Node.js module?',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a valid way to create a readable stream in Node.js?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'fs.createWriteStream()', is_correct: false },
|
||||
{ label: 'fs.createReadStream()', is_correct: true },
|
||||
{ label: 'fs.readFile()', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "events" module in Node.js?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which method is used to handle HTTP POST requests in Node.js?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'HTTP POST requests are handled automatically', is_correct: false },
|
||||
{ label: 'http.createServer()', is_correct: false },
|
||||
{ label: 'req.on("data")', is_correct: false },
|
||||
{ label: 'req.on("end")', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'In Node.js, what does the "path" module provide?',
|
||||
name: 'q9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'File system operations', is_correct: true },
|
||||
{ label: 'URL parsing', is_correct: true },
|
||||
{ label: 'Event handling', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'How do you import a local module in Node.js?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: "require('./module_name')", is_correct: true },
|
||||
{ label: "import module_name from 'module_name'", is_correct: false },
|
||||
{ label: "import './module_name'", is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,123 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Node.js HTTP Quiz',
|
||||
description: 'Test your knowledge of Node.js HTTP module from W3Schools',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the primary use of the Node.js HTTP module?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Handling HTTP requests and responses', is_correct: true },
|
||||
{ label: 'Creating file streams', is_correct: false },
|
||||
{ label: 'Database operations', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which HTTP method is used to request data from a server?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'POST', is_correct: false },
|
||||
{ label: 'GET', is_correct: true },
|
||||
{ label: 'PUT', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What does the HTTP response status code 404 indicate?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'OK', is_correct: false },
|
||||
{ label: 'Not Found', is_correct: true },
|
||||
{ label: 'Server Error', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a valid HTTP request header?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Content-Type', is_correct: true },
|
||||
{ label: 'Authorization', is_correct: true },
|
||||
{ label: 'User-Agent', is_correct: false },
|
||||
{ label: 'Cache-Control', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the purpose of a query string in a URL.',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "http" module in Node.js?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which method in the "http" module is used to create an HTTP server?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'http.createServer()', is_correct: true },
|
||||
{ label: 'http.request()', is_correct: false },
|
||||
{ label: 'http.listen()', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "request" and "response" objects in an HTTP server callback?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which HTTP method is used to send data to the server for processing?',
|
||||
name: 'q9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'POST', is_correct: true },
|
||||
{ label: 'GET', is_correct: false },
|
||||
{ label: 'PUT', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "querystring" module in Node.js?',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Parsing and formatting URL query strings', is_correct: true },
|
||||
{ label: 'Handling HTTP headers', is_correct: false },
|
||||
{ label: 'Creating HTML templates', is_correct: false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -1,124 +0,0 @@
|
||||
import { QuestionTypes } from '../utils';
|
||||
|
||||
import type { ExerciseTemplate } from '$lib/utils/types';
|
||||
|
||||
const template: ExerciseTemplate = {
|
||||
title: 'Node.js File System Quiz',
|
||||
description: 'Test your knowledge of Node.js File System module from W3Schools',
|
||||
questionnaire: {
|
||||
questions: [
|
||||
{
|
||||
title: 'What is the primary use of the Node.js File System module?',
|
||||
name: 'q1',
|
||||
points: 1,
|
||||
order: 1,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Handling file operations', is_correct: true },
|
||||
{ label: 'Database operations', is_correct: false },
|
||||
{ label: 'Network communication', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which method is used to read the contents of a file in Node.js?',
|
||||
name: 'q2',
|
||||
points: 1,
|
||||
order: 2,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'fs.read()', is_correct: false },
|
||||
{ label: 'fs.readFile()', is_correct: true },
|
||||
{ label: 'fs.write()', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "fs.promises" API in Node.js File System?',
|
||||
name: 'q3',
|
||||
points: 1,
|
||||
order: 3,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'Handling synchronous file operations', is_correct: false },
|
||||
{ label: 'Handling asynchronous file operations with promises', is_correct: true },
|
||||
{ label: 'Handling network requests', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a valid way to create a new file using the File System module?',
|
||||
name: 'q4',
|
||||
points: 1,
|
||||
order: 4,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'fs.createFile()', is_correct: true },
|
||||
{ label: 'fs.writeFile()', is_correct: true },
|
||||
{ label: 'fs.newFile()', is_correct: false },
|
||||
{ label: 'fs.appendFile()', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between synchronous and asynchronous file operations in Node.js.',
|
||||
name: 'q5',
|
||||
points: 2,
|
||||
order: 5,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'How can you check if a file exists using the File System module in Node.js?',
|
||||
name: 'q6',
|
||||
points: 2,
|
||||
order: 6,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'fs.exists()', is_correct: false },
|
||||
{ label: 'fs.access()', is_correct: true },
|
||||
{ label: 'fs.checkFile()', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Which method is used to delete a file in Node.js using the File System module?',
|
||||
name: 'q7',
|
||||
points: 2,
|
||||
order: 7,
|
||||
question_type: QuestionTypes[0], // RADIO
|
||||
options: [
|
||||
{ label: 'fs.remove()', is_correct: false },
|
||||
{ label: 'fs.deleteFile()', is_correct: false },
|
||||
{ label: 'fs.unlink()', is_correct: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'What is the purpose of the "fs.createReadStream()" method in Node.js?',
|
||||
name: 'q8',
|
||||
points: 2,
|
||||
order: 8,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
},
|
||||
{
|
||||
title: 'Which of the following is a valid use case for the File System module in Node.js?',
|
||||
name: 'q9',
|
||||
points: 2,
|
||||
order: 9,
|
||||
question_type: QuestionTypes[1], // CHECKBOX
|
||||
options: [
|
||||
{ label: 'Reading and writing configuration files', is_correct: true },
|
||||
{ label: 'Creating a web server', is_correct: false },
|
||||
{ label: 'Sending emails', is_correct: false },
|
||||
{ label: 'Database operations', is_correct: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Explain the difference between "fs.readFile()" and "fs.readFileSync()" in Node.js.',
|
||||
name: 'q10',
|
||||
points: 2,
|
||||
order: 10,
|
||||
question_type: QuestionTypes[2], // TEXTAREA
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default template;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user