23 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
11 |
12 |
13 |
14 |
15 |
19 |
23 | {tutorial.contents}
24 |
25 | {!tutorial.noNext && (
26 |
29 | )}
30 |
31 | Congratulations!
21 |You solved all the problems in CSS Grid Mastery Quiz.
22 |23 | You are now CSS Grid Master! 24 |
25 |26 | 32 | Share on Twitter 33 | 34 |
35 | 36 | ), 37 | ja: ( 38 | <> 39 |完全制覇！
40 |41 | おめでとうございます！ CSS Grid Mastery 42 | Quizの全ての問題をクリアしました。 43 |
44 |45 | あなたはCSS Gridマスターです！ 46 |
47 |48 | 54 | Twitterでシェアする 55 | 56 |
57 | 58 | ), 59 | }); 60 | return
16 |
54 | );
55 | };
56 |
--------------------------------------------------------------------------------
/src/questions/v1/tutorial/Tutorial1.tsx:
--------------------------------------------------------------------------------
1 | import { GridArea } from "../../../pages/QuestionPage/components/GridArea";
2 | import { useGridItemSelection } from "../../../pages/QuestionPage/logic/useGridItemSelection";
3 | import { useI18n } from "../../../utils/i18n/LanguageContext";
4 | import classes from "./Tutorial.module.css";
5 |
6 | export const Tutorial1: React.VFC = () => {
7 | const { gridDef, selectedItems, toggleItem } = useSampleGrid();
8 |
9 | const code1 = (
10 |
17 |
24 |
25 |
26 |
33 |
34 |
35 |
42 |
43 |
44 |
51 |
52 | {children}
53 |
11 |
12 | {`
13 |
14 |
15 |
16 | `.trim()}
17 |
18 |
19 | );
20 | const code2 = (
21 |
22 |
23 | {`
24 | .grid-container {
25 | display: grid;
26 | grid-template-columns: 1fr 1fr;
27 | grid-template-rows: 1fr 1fr;
28 | }
29 | .grid-item {
30 | grid-column: 1;
31 | grid-row: 1;
32 | }
33 | `.trim()}
34 |
35 |
36 | );
37 | const sample = (
38 |
39 |
46 | );
47 |
48 | const contents = useI18n({
49 | en: (
50 | <>
51 | Tutorial #1
52 |Consider the following HTML structure:
53 | {code1} 54 |You are given style definitions for above elements. Example:
55 | {code2} 56 |
57 | Click/tap all grid cells occupied by the .grid-item{" "}
58 | element. Press “Check” button to check your answer.
59 |
Sample:
61 | {sample} 62 |After making three mistakes, a “Cheat” button appears.
63 | 64 | ), 65 | ja: ( 66 | <> 67 |チュートリアル #1
68 |ここでは、次のHTML構造を考えます。
69 | {code1} 70 |これに対して、次の例のようにスタイル定義が与えられます。
71 | {code2} 72 |
73 | .grid-item
74 | 要素が占めるすべてのグリッドセルをクリック/タップしてください。
75 | その後“Check”ボタンを押して答えが合っているか確かめましょう。
76 |
例:
78 | {sample} 79 |3回間違えると“Cheat”ボタンが出現します。
80 | 81 | ), 82 | }); 83 | 84 | return
14 |
15 |
27 |
28 | );
29 |
30 | const contents = useI18n({
31 | en: (
32 | <>
33 | Tutorial #2
34 |
35 | When grid items are placed outside of the grid area explicitly deined
36 | by grid-template-columns and{" "}
37 | grid-template-rows,implicit grid tracks and{" "}
38 | implicit grid lines are generated outside of explicit grid
39 | tracks.
40 |
42 | From now on, the correct answer may enter those implicit grid cells. 43 |
44 |45 | To specify such cells, you need to extend the displayed grid 46 | by pressing the plus buttons placed at each edge. 47 |
48 |49 | To remove extended cells, you need to reset the state of the grid by 50 | pressing “Reset” button. 51 |
52 |Sample:
53 | {sample} 54 | 55 | ), 56 | ja: ( 57 | <> 58 |チュートリアル #2
59 |
60 | グリッドアイテムがgrid-template-columnsおよび
61 | grid-template-rows
62 | によって明示的に定義されたグリッドエリアの外に配置された場合、
63 | 明示的なグリッドエリアの外側に暗黙のグリッドトラック
64 | が生成されます。
65 |
67 | これからは、正しい答えが初期表示されているグリッドの範囲を超えて暗黙のグリッドトラックにまたがる可能性があります。 68 |
69 |70 | そのような回答をするためには、表示されているグリッドを、各辺に配置されたプラスボタンを押すことで拡張する必要があります。 71 |
72 |73 | 拡張したグリッドセルを元に戻すには、“Reset”ボタンを押して画面を初期化する必要があります。 74 |
75 |拡張できるグリッドセルのサンプル:
76 | {sample} 77 | 78 | ), 79 | }); 80 | return20 | Learn how CSS Grid works through a number of CSS Grid questions! 21 |
22 |23 | With the current version, you can learn how grid placement 24 | properties work. 25 |
26 | 27 | ), 28 | proceed: "Proceed to Tutorial", 29 | progress: ( 30 | <> 31 |How do I save my progress?
32 |33 | To save your progress, just save current URL. To continue, open that 34 | URL and go on! 35 |
36 | 37 | ), 38 | }, 39 | ja: { 40 | intro: ( 41 | <> 42 |数々のCSS Gridの問題を解いてCSS Gridの仕組みを学習しよう！
43 |44 | 現在のバージョンでは、グリッドアイテムの配置にかかわるプロパティの挙動を学ぶことができます。 45 |
46 | 47 | ), 48 | proceed: "チュートリアルに進む", 49 | progress: ( 50 | <> 51 |進捗を保存する方法
52 |53 | 現在の進捗を保存するには、現在のURLを保存しておくだけで構いません。そのURLを開けば再開できます。 54 |
55 | 56 | ), 57 | }, 58 | }); 59 | 60 | return ( 61 |
62 |
63 |
64 |
72 |
88 | {langs.intro}
89 |
96 |
116 | );
117 | };
118 |
--------------------------------------------------------------------------------
/src/pages/QuestionPage/components/GridArea.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment } from "react";
2 | import { GridPosition } from "../../../questions/GridPosition";
3 | import { range } from "../../../utils/range";
4 | import { GridExtensionState } from "../logic/useGridExtension";
5 | import classes from "./GridArea.module.css";
6 |
7 | type GridDef = { rows: number; columns: number };
8 |
9 | type SubgridDef = {
10 | style: React.CSSProperties;
11 | };
12 |
13 | type PropsBase = {
14 | gridDef: GridDef;
15 | className?: string;
16 | style?: React.CSSProperties;
17 | children?: React.ReactNode;
18 | };
19 |
20 | type PropsHasGrid = PropsBase & {
21 | hasGrid: true;
22 | toggleItem: (column: number, row: number) => void;
23 | selectedItems: readonly GridPosition[];
24 | extension?: GridExtensionState;
25 | };
26 |
27 | type PropsNoGrid = PropsBase & {
28 | hasGrid?: false;
29 | };
30 |
31 | type Props = PropsHasGrid | PropsNoGrid;
32 |
33 | export const GridArea: React.VFC
64 | 
71 |
72 | 73 | 74 | English 75 | {" "} 76 | |{" "} 77 | 84 | 日本語 85 | 86 |
87 |90 | 91 | {langs.proceed} 92 | 93 |
94 | {langs.progress} 95 |96 |
97 | 98 | GitHub 99 | 100 |
101 |102 | 103 | Share on Twitter 104 | 105 |
106 |107 | 108 | This site is using{" "} 109 | 110 | Twemoji 111 | 112 | . 113 | 114 |
115 |
82 | {gridContents}
83 | {children}
84 |
85 | );
86 | };
87 |
88 | function isInGrid(column: number, row: number, gridDef: GridDef) {
89 | return (
90 | column >= 1 && column <= gridDef.columns && row >= 1 && row <= gridDef.rows
91 | );
92 | }
93 |
94 | function getGridPlacelement(
95 | column: number,
96 | row: number,
97 | gridDef: GridDef
98 | ): React.CSSProperties {
99 | const gridRow =
100 | 1 <= row
101 | ? `${row}`
102 | : // 0 -> -(gridDef.rows+2), -1 -> -(gridDef.rows+3) ...
103 | `${-gridDef.rows + row - 2}`;
104 |
105 | const gridColumn =
106 | 1 <= column ? `${column}` : `${-gridDef.columns + column - 2}`;
107 | return {
108 | gridRow,
109 | gridColumn,
110 | };
111 | }
112 |
--------------------------------------------------------------------------------
/src/questions/v1/tutorial/Tutorial3.tsx:
--------------------------------------------------------------------------------
1 | import { GridArea } from "../../../pages/QuestionPage/components/GridArea";
2 | import { useGridItemSelection } from "../../../pages/QuestionPage/logic/useGridItemSelection";
3 | import { useI18n } from "../../../utils/i18n/LanguageContext";
4 | import classes from "./Tutorial.module.css";
5 |
6 | export const Tutorial3: React.VFC = () => {
7 | const { gridDef, selectedItems, toggleItem } = useSampleGrid();
8 |
9 | const code1 = (
10 |
11 |
12 | {`
13 |
14 |
15 |
16 |
17 |
18 | `.trim()}
19 |
20 |
21 | );
22 |
23 | const code2 = (
24 |
25 |
26 | {`
27 | .grid-container {
28 | display: grid;
29 | grid-template-columns: 1fr 1fr 1fr;
30 | grid-template-rows: 1fr 1fr 1fr;
31 | }
32 | .subgrid {
33 | grid-column: 2 / 4;
34 | grid-rows: 1 / 3;
35 | display: grid;
36 | grid-template-columns: subgrid;
37 | grid-template-rows: subgrid;
38 | }
39 | .grid-item {
40 | grid-column: 1;
41 | grid-row: 1;
42 | }
43 | `.trim()}
44 |
45 |
46 | );
47 |
48 | const sample = (
49 |
50 |
61 | );
62 |
63 | const contents = useI18n({
64 | en: (
65 | <>
66 | Tutorial #3
67 |68 | A recent version of CSS Grid has the concept of subgrid. A 69 | subgrid itself is a grid item of the parent grid container and also 70 | has its own grid in it. An axis declared as subgrid inherit grid lines 71 | from the parent grid, still maintaining its own coordinate system. 72 |
73 |From now on, let's consider the following HTML structure:
74 | {code1} 75 |76 | Now you are given style definitions for these three elements. Example: 77 |
78 | {code2} 79 |
80 | You still need to answer the grid cells occupied by the element at the
81 | bottom of tree, namely .grid-item one. Note that the
82 | coordinates displayed in the answering grid is ones of the parent grid
83 | container (.grid-container).
84 |
Sample (answer for the above style):
86 | {sample} 87 | 88 | ), 89 | ja: ( 90 | <> 91 |チュートリアル #3
92 |93 | 最近のバージョンのCSS Gridには、サブグリッド 94 | という概念があります。サブグリッドは、親のグリッドに 95 | 属するグリッドアイテムでありつつ、自身もグリッドコンテナです。 96 | サブグリッドとして宣言された軸は、親のグリッドトラックをそのまま継承しますが、独自の座標軸を持っています。 97 |
98 |今後の問題では、次のようなHTML構造を考えます。
99 | {code1} 100 |101 | そして、次の例のように、これら3つの要素に対するスタイルが与えられます。 102 |
103 | {code2} 104 |
105 | これまで通り、ツリーの末端にある.grid-item
106 | 要素が占めるグリッドセルを解答してください。解答用のグリッドに表示されている座標は親グリッド（
107 | .grid-container）のものである点に注意してください。
108 |
例（上記の例に対する解答）:
110 | {sample} 111 | 112 | ), 113 | }); 114 | 115 | return
72 |
88 | {subgridStyleObj ? (
89 |
96 | )}
97 |
98 | );
99 |
100 | return (
101 |
90 |
91 |
92 | ) : (
93 |
94 | )}
95 | 108 | Page {quizId} 109 |
110 |
116 | {extensible ? (
117 |
118 | {mainGrid}
119 |
120 | ) : (
121 | mainGrid
122 | )}
123 |
124 |
143 |
155 | );
156 | });
157 |
158 | const ControlGrid: React.VFC<{
159 | buttonState: ButtonState;
160 | isCheat: boolean;
161 | isSubgrid: boolean;
162 | reset: () => void;
163 | check: () => void;
164 | getCheat: (() => void) | undefined;
165 | }> = memo(({ buttonState, isCheat, isSubgrid, reset, check, getCheat }) => {
166 | const langs = useI18n({
167 | en: {
168 | goToTop: "Go to Top",
169 | correct: "Correct!",
170 | wrong: "Wrong…",
171 | subgridCheatNote:
172 | "Note: cheat for subgrids only works for browsers that support subgrid.",
173 | },
174 | ja: {
175 | goToTop: "トップへ",
176 | correct: "正解！",
177 | wrong: "不正解…",
178 | subgridCheatNote:
179 | "注意：subgridに対するチートはブラウザがsubgridをサポートしている場合のみ正常に動作します。",
180 | },
181 | });
182 | return (
183 |
144 | {gridStyleDisp}
145 |
146 | {subgridStyleDisp ? (
147 |
148 | {subgridStyleDisp}
149 |
150 | ) : null}
151 |
152 | {itemStyleDisp}
153 |
154 |
184 |
185 | {langs.goToTop}
186 |
187 | {getCheat !== undefined ? (
188 |
191 | ) : (
192 |
193 | )}
194 |
195 | {buttonState === "check" ? (
196 |
199 | ) : buttonState === "correct" ? (
200 |
203 | ) : buttonState === "wrong" ? (
204 |
207 | ) : null}
208 | {isCheat && isSubgrid ? (
209 |
212 | );
213 | });
214 |
--------------------------------------------------------------------------------
{langs.subgridCheatNote}
210 | ) : null} 211 |