SponsoredDeveloper Deals

Markdown Quiz & Technical Flashcard Generator

Build interactive technical interview quizzes and study flashcards with native HTML5 <details> answer spoilers for GitHub and Obsidian.

Quiz / Flashcard Deck Title

Questions (3)

Question #1

Question Prompt

Multiple Choice Options (Select Correct Answer)

Solution Explanation (Hidden inside click-to-reveal spoiler)

Question #2

Question Prompt

Multiple Choice Options (Select Correct Answer)

Solution Explanation (Hidden inside click-to-reveal spoiler)

Question #3

Question Prompt

Multiple Choice Options (Select Correct Answer)

Solution Explanation (Hidden inside click-to-reveal spoiler)

Markdown Quiz Deck (.md)3 questions

# 🧠 Frontend Senior Engineering & Web Performance Quiz

> Test your knowledge! Expand the solution spoiler under each question to verify your answers.

### Question 1 `[Web Performance]`
Which Core Web Vital metric measures visual stability and layout movement during page load?

- **A)** First Contentful Paint (FCP)
- **B)** Cumulative Layout Shift (CLS)
- **C)** Largest Contentful Paint (LCP)
- **D)** Interaction to Next Paint (INP)

<details>
<summary><b>👉 Click to Reveal Correct Answer</b></summary>

**Correct Answer**: **B) Cumulative Layout Shift (CLS)**

> 💡 **Explanation**: Cumulative Layout Shift (CLS) quantifies the cumulative score of all unexpected layout shifts that occur during the entire lifespan of the page. A good CLS score is less than or equal to 0.1.

</details>

---

### Question 2 `[React / Next.js]`
In Next.js App Router, which directive converts a Server Component into an interactive Client Component?

- **A)** "use server"
- **B)** "client side"
- **C)** "use client"
- **D)** "render client"

<details>
<summary><b>👉 Click to Reveal Correct Answer</b></summary>

**Correct Answer**: **C) "use client"**

> 💡 **Explanation**: The 'use client' directive marks the boundary between Server and Client Components in Next.js App Router, enabling hooks like useState, useEffect, and event listeners.

</details>

---

### Question 3 `[TypeScript]`
What does the TypeScript utility type 'Omit<T, K>' do?

- **A)** Constructs a type consisting of all properties of T except keys in K
- **B)** Constructs a type with only keys in K picked from T
- **C)** Makes all properties of T optional except keys in K
- **D)** Freezes the object properties so they cannot be mutated

<details>
<summary><b>👉 Click to Reveal Correct Answer</b></summary>

**Correct Answer**: **A) Constructs a type consisting of all properties of T except keys in K**

> 💡 **Explanation**: Omit<Type, Keys> constructs a new type by picking all properties from Type and then removing Keys.

</details>

---

SponsoredDeveloper Deals

Complete Guide & Overview

Markdown Quiz & Interview Flashcard Generator

Create interactive technical quizzes and study flashcards with click-to-reveal solution spoilers (<details>) for GitHub and Obsidian. Perfect for dev roadmaps, bootcamps, and technical interviews.

How to Use the Markdown Quiz & Interview Flashcard Generator

Input Content

Paste or compose your markdown or source data into the input editor.

Customize Settings

Select formatting options, syntax modes, or display options.

Copy or Download

Copy the processed output to your clipboard or download the generated file.

Key Features & Capabilities

Native HTML5 Spoilers: Uses standard `<details><summary>` elements that work natively on GitHub and Obsidian without JavaScript.

Interactive Self-Testing: Learners can test their recall before expanding explanations.

Categorized Flashcards: Organize questions by subject or difficulty level.

100% Client-Side: Study materials and proprietary quiz questions never leave your browser.

Frequently Asked Questions

Do `<details>` spoilers work on GitHub and GitLab?

Yes! Both GitHub and GitLab support HTML5 `<details>` and `<summary>` tags directly inside Markdown files. When rendered, users see a clickable toggle that hides the answer until clicked.

Can I import this quiz into Obsidian or Notion?

Absolutely. Obsidian natively renders HTML details blocks as collapsible toggles. Notion also converts them into toggle blocks when pasted directly into a page.

Workflow Continuity

Related Markdown Tools

View all 123 tools

Generators

Spoiler Generator

Format spoiler-hidden text for Discord (||text||), Reddit (>!text!<), and GitHub.

Open Tool

Generators

Collapsible Sections

Create HTML <details> and <summary> accordion blocks for expandable FAQ and spoilers.

Open Tool

Security & Analysis

Cheat Sheet

Complete interactive Markdown syntax guide with instant copyable code and live previews.

Open Tool

Generators

Markdown Editor

Full-featured dual-pane live editor with syntax toolbar, localStorage autosave, and document stats.

Open Tool

SponsoredDeveloper Deals