Add the Quiz Card tutorial template (`tutorial-quiz-card`)
维护者通常 1 天内回复
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 78/100
- Issue 类型
- 功能
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- react, typescript
调研方向
Start with src/templates/product/feature-grid.ts for the 2x2 layout and src/templates/tutorial/difficulty-badge.ts for select fields; check src/components/editor/ToggleSwitch.tsx for the toggle UI. Implement the template in src/templates/tutorial/quiz-card.ts, ensuring showAnswer handles boolean and string values, then re-export and register it in the named files. Done when the listed acceptance criteria and shared checklist in #5 are met.
由索引模型根据 Issue 内容生成。
描述
Part of #5. "Quiz of the day" cards are popular with educators. This is also the first template to use the toggle field type.
Idea
A "Quiz" pill plus a category pill at the top, then the question in large type. Below are 4 option boxes in a 2x2 layout (two flex rows), each with a letter badge (A to D). When "Show answer" is on, the correct option gets an accent background and a "Correct" tag.
Template details
- File:
src/templates/tutorial/quiz-card.ts, idtutorial-quiz-card - Fields:
commonFields.title(question),optionAtooptionD(text),correctOption(select: A / B / C / D),showAnswer(toggle, default false),commonFields.category,commonFields.bgColor,commonFields.accentColor,commonFields.textColor
Where to look
- Closest reference:
src/templates/product/feature-grid.ts(2x2),src/templates/tutorial/difficulty-badge.ts(select field) - Toggle UI:
src/components/editor/ToggleSwitch.tsx
Acceptance criteria
-
showAnsweris parsed asparams.showAnswer === true || params.showAnswer === 'true'(the API passes strings) - The toggle works in the editor
- Re-exported in
src/templates/tutorial/index.tsand registered in the Tutorial block ofsrc/templates/registry.ts - Meets the shared template checklist in #5
One template per contributor at a time, so more people get a chance.
Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #<this issue number>.
- 主要语言
- TypeScript
- 星标
- 8
- 派生
- 4
- 平均合并
- 6 小时 9 分钟
- 30 天内合并 PR
- 66
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
codercops/ogcops 的其他 Issue
-
accessibility bug good first issue hacktoberfest ui
难度 2/5 1-3 小时 新手友好度 85/100
维护者通常 1 天内回复
-
accessibility bug good first issue hacktoberfest
难度 2/5 1-3 小时 新手友好度 86/100
维护者通常 1 天内回复
-
bug good first issue hacktoberfest ui
难度 2/5 1-3 小时 新手友好度 88/100
维护者通常 1 天内回复
-
bug good first issue hacktoberfest
难度 2/5 1-3 小时 新手友好度 88/100
codercops/ogcops#167 · 1 条评论 ·
维护者通常 1 天内回复
-
An empty `imageUrl=`, `logoUrl=` or `template=` returns an error instead of the default可能已有人在做 @Saifjafri212213 于 1 天前认领。 未关闭bug good first issue hacktoberfest
难度 2/5 1-3 小时 新手友好度 88/100
codercops/ogcops#166 · 1 条评论 ·
维护者通常 1 天内回复
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 68/100
maniator/verticopolis#1303 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 73/100
components-web-app/docs#297 ·
-
难度 2/5 1-3 小时 新手友好度 68/100
appwrite/mcp-for-docs#23 · 1 条评论 ·
-
`@vanilla-extract/turbopack-plugin`: "getImageSize is not a function" with Next.js 16.4.x when a `.css.ts` file imports an image可能已有人在做 @aevarOrigo 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
vanilla-extract-css/vanilla-extract#1799 · 1 条评论 ·
-
native
难度 2/5 1-3 小时 新手友好度 72/100
prime-radiant-inc/evener#4839 ·
维护者通常 1 天内回复