diff --git a/src/components/Course/ChallengeView.tsx b/src/components/Course/ChallengeView.tsx index 32e66bded..6aa4d38f3 100644 --- a/src/components/Course/ChallengeView.tsx +++ b/src/components/Course/ChallengeView.tsx @@ -6,6 +6,7 @@ import { import { SqlCodeEditor } from '../SqlCodeEditor/SqlCodeEditor'; import type { ReactNode } from 'react'; import type { LessonFileType } from '../../lib/course'; +import { LessonView } from './LessonView'; type ChallengeViewProps = { lesson: LessonFileType; @@ -21,11 +22,7 @@ export function ChallengeView(props: ChallengeViewProps) { return ( -
-
-
{children}
-
-
+ {children} diff --git a/src/components/Course/Chapter.tsx b/src/components/Course/Chapter.tsx index d4790ccf9..3ec806e4b 100644 --- a/src/components/Course/Chapter.tsx +++ b/src/components/Course/Chapter.tsx @@ -43,7 +43,11 @@ export function Chapter(props: ChapterProps) { const filteredLessons = useMemo( () => lessons - ?.filter((lesson) => lesson.frontmatter.type === 'lesson') + ?.filter((lesson) => + ['lesson', 'lesson-challenge', 'lesson-quiz'].includes( + lesson.frontmatter.type, + ), + ) ?.sort((a, b) => a.frontmatter.order - b.frontmatter.order) || [], [lessons], ); diff --git a/src/components/Course/LessonQuizView.tsx b/src/components/Course/LessonQuizView.tsx new file mode 100644 index 000000000..a016e6e04 --- /dev/null +++ b/src/components/Course/LessonQuizView.tsx @@ -0,0 +1,33 @@ +import { + ResizableHandle, + ResizablePanel, + ResizablePanelGroup, +} from '../Resizable'; +import { SqlCodeEditor } from '../SqlCodeEditor/SqlCodeEditor'; +import type { ReactNode } from 'react'; +import type { LessonFileType } from '../../lib/course'; +import { LessonView } from './LessonView'; +import { QuizView } from './QuizView'; + +type LessonQuizViewProps = { + lesson: LessonFileType; + children: ReactNode; +}; + +export function LessonQuizView(props: LessonQuizViewProps) { + const { children, lesson } = props; + + return ( + + + {children} + + + + + + + + + ); +} diff --git a/src/components/Course/LessonView.tsx b/src/components/Course/LessonView.tsx index 49c8f3238..1383495a9 100644 --- a/src/components/Course/LessonView.tsx +++ b/src/components/Course/LessonView.tsx @@ -10,7 +10,11 @@ export function LessonView(props: LessonViewProps) { return (
-
{children}
+
+
+ {children} +
+
); diff --git a/src/components/Course/QuizView.tsx b/src/components/Course/QuizView.tsx index f932a8066..aae613c0c 100644 --- a/src/components/Course/QuizView.tsx +++ b/src/components/Course/QuizView.tsx @@ -35,7 +35,7 @@ export function QuizView(props: QuizViewProps) {

- SQL Quiz: Intermediate + {lesson.frontmatter.title}

diff --git a/src/data/courses/sql/chapters/introduction/lessons/welcome-quiz.md b/src/data/courses/sql/chapters/introduction/lessons/welcome-quiz.md new file mode 100644 index 000000000..5967ca398 --- /dev/null +++ b/src/data/courses/sql/chapters/introduction/lessons/welcome-quiz.md @@ -0,0 +1,71 @@ +--- +title: Welcome Quiz +description: Learn the basics of SQL, the language for querying databases. +order: 150 +type: lesson-quiz +questions: + - id: 1 + title: 'Which of the following SQL clauses is used to filter results after the GROUP BY clause?' + options: + - id: 1 + text: 'WHERE' + - id: 2 + text: 'HAVING' + isCorrectOption: true + - id: 3 + text: 'GROUP BY' + - id: 4 + text: 'ORDER BY' + - id: 2 + title: 'Which SQL function is used to return the first non-null expression?' + options: + - id: 1 + text: 'COALESCE' + isCorrectOption: true + - id: 2 + text: 'IFNULL' + - id: 3 + text: 'NULLIF' + - id: 4 + text: 'NVL' + - id: 3 + title: 'What is the purpose of an SQL CTE (Common Table Expression)?' + options: + - id: 1 + text: 'To create temporary tables that last for the duration of a query' + isCorrectOption: true + - id: 2 + text: 'To define reusable views' + - id: 3 + text: 'To encapsulate subqueries' + - id: 4 + text: 'To optimize the execution of queries' + - id: 4 + title: 'In an SQL window function, which clause defines the subset of rows to apply the function on?' + options: + - id: 1 + text: 'ORDER BY' + - id: 2 + text: 'PARTITION BY' + isCorrectOption: true + - id: 3 + text: 'GROUP BY' + - id: 4 + text: 'DISTINCT' + - id: 5 + title: 'Which SQL join returns all rows when there is a match in either of the tables?' + options: + - id: 1 + text: 'INNER JOIN' + - id: 2 + text: 'LEFT JOIN' + - id: 3 + text: 'RIGHT JOIN' + - id: 4 + text: 'FULL OUTER JOIN' + isCorrectOption: true +--- + +The SQL language is widely used today across web frameworks and database applications. Knowing SQL gives you the freedom to explore your data, and the power to make better decisions. By learning SQL, you will also learn concepts that apply to nearly every data storage system. + +The statements covered in this course use SQLite Relational Database Management System (RDBMS). You can also access a glossary of all the SQL commands taught in this course. diff --git a/src/lib/course.ts b/src/lib/course.ts index fcf9dac59..6dbbc5a3d 100644 --- a/src/lib/course.ts +++ b/src/lib/course.ts @@ -10,7 +10,7 @@ export type LessonFrontmatter = { title: string; description: string; order: number; - type: 'lesson' | 'challenge' | 'quiz'; + type: 'lesson' | 'challenge' | 'quiz' | 'lesson-challenge' | 'lesson-quiz'; defaultValue?: string; initSteps?: string[]; diff --git a/src/pages/learn/[courseId]/[chapterId]/[lessonId].astro b/src/pages/learn/[courseId]/[chapterId]/[lessonId].astro index 2e69cbdd1..9ca0d027b 100644 --- a/src/pages/learn/[courseId]/[chapterId]/[lessonId].astro +++ b/src/pages/learn/[courseId]/[chapterId]/[lessonId].astro @@ -2,6 +2,7 @@ import { ChallengeView } from '../../../../components/Course/ChallengeView'; import { LessonView } from '../../../../components/Course/LessonView'; import { QuizView } from '../../../../components/Course/QuizView'; +import { LessonQuizView } from '../../../../components/Course/LessonQuizView'; import { CourseLayout } from '../../../../components/Course/CourseLayout'; import SkeletonLayout from '../../../../layouts/SkeletonLayout.astro'; import { @@ -82,11 +83,10 @@ const { course, chapter, lesson } = Astro.props; client:load > { - lesson.frontmatter.type === 'challenge' && ( + (lesson.frontmatter.type === 'challenge' || + lesson.frontmatter.type === 'lesson-challenge') && ( -
- -
+ ) } @@ -94,9 +94,7 @@ const { course, chapter, lesson } = Astro.props; { lesson.frontmatter.type === 'lesson' && ( -
- -
+ ) } @@ -106,5 +104,13 @@ const { course, chapter, lesson } = Astro.props; ) } + + { + lesson.frontmatter.type === 'lesson-quiz' && ( + + + + ) + }