Tirsvad-Udemy-100-days-of-code/031-flash-card

Files

T

Tirsvad 0b983b7fda MIL-008 plan and design: choose level (100, 1000 or all words)

New milestone MIL-008 with story US-001.06, and the design documents
updated for the level choice: BC-001, PP-001, US-001, UC-001, DM-001,
DICT-001, SSD-001, OC-001, SD-001, DCD-001 and the wireframe. Review
records RC-030 to RC-040, all Go (autonomous mode, not independent).

Task: MIL-008#1

2026-10-14 23:44:59 +08:00

3.1 KiB

Raw Blame History

Wireframe: Study Flash Cards

Revision 2026-10-14: the level screen (screen 1) was added for US-001.06. It was drawn by the AI from the use case because the Product Owner gave no wireframe for it; S01 may change it.

The Product Owner gave this screen in the first prompt (the course's target screenshot). The presentation layer implements it and does not redesign it. Source use case: UC-001.

Screen 1: Choose your level

+----------------------------------------------------------+   background  #B1DDC6
|   padding 50 px                                          |
|                                                          |
|              Choose your level   (Arial 40 italic)       |
|                                                          |
|                  [   100 words   ]                       |
|                  [  1000 words   ]                       |
|                  [   All words   ]                       |
|                                                          |
+----------------------------------------------------------+

Element	Position	Details
Window	whole	Same title, padding and background as the card screen
Title	row 0	"Choose your level", Arial 40 italic
Level buttons	rows 1 to 3, one column	Labels "100 words", "1000 words", "All words"; Arial 24 bold; white background, equal width
After a choice	whole	The screen is replaced by screen 2 on the same window

Screen 2: The card

+----------------------------------------------------------+   background  #B1DDC6
|   padding 50 px                                          |
|   +--------------------------------------------------+   |
|   |                                                  |   |
|   |                 Malay        (italic, 40 pt)     |   |   card image 800 x 526
|   |                                                  |   |   card_front.png (white)
|   |                 aku          (bold, 60 pt)       |   |   card_back.png  (green)
|   |                                                  |   |
|   +--------------------------------------------------+   |
|        [ X unknown ]                  [ v known ]        |   buttons: wrong.png, right.png
+----------------------------------------------------------+

Layout

Element	Position	Details
Window	whole	Title "Flashy", padding 50 px, background `#B1DDC6`
Card	grid row 0, columns 0 and 1 (both)	`Canvas` 800 x 526, one image, two texts
Language name	centre of card, y = 150	Arial 40 italic
Word	centre of card, y = 263	Arial 60 bold
Unknown button	grid row 1, column 0	`wrong.png`, no border
Known button	grid row 1, column 1	`right.png`, no border

States

State	Card image	Language name	Word	Text colour
Front (first 3000 ms)	`card_front.png`	Malay	the Malay word	black
Back (after 3000 ms)	`card_back.png`	Danish	the Danish translation	white
Finished	`card_front.png`	(empty)	"Nothing left to learn"	black

3.1 KiB Raw Blame History