新「復習プリント」の作成

6年生が単元学習するためのプリント(旧「復プリ」)ではなく、単元学習が終了した生徒がテスト前に見直すプリント(新「復プリ」)を作成する。

できるだけ簡易に!

試作アルファ・ベータ

構成

最低限のヘッダーとフッターを準備して(htmlの図解プリを参考に)、中に<article></article>で内容を入れる。クラス名は「rvw1」

問題と答えの縦の区切り線を付属要素で入れる。(webではどうするか。モバイル表示があるから面倒くさい)
→傾き100の1次関数の切片を調整して、ある画面幅を境に太さが一気にゼロ(マイナス)になるようにした。

その中に問題と答えのセットを<section></section>で囲む。クラス名は「unt」
display:flex;で横並び。flex-wrap:wrap;でモバイル表示では縦並びに

問題は<div></div>で囲む。クラス名は「qst」

答えは<div></div>で囲む。クラス名は「ans」

編集画面では色がつくように各divに背景色を設定してweb(entry-content直下)では背景色を無しに。

試作アルファ

●数列の基本
1,4,7,10…という数列の200番目は?
はじめの数1,公差=3,N=200なので、1+3×(200-1)=1+600-3=598
169は1,4,7,10…という数列の何番目?
{(169-1)÷3}+1=57番目
●群数列
1,4,7,10…という数列のはじめの数から12番目までの和は?
はじめの数=1,N=12,N番目の数=12番目の数=1+3×(12-1)=34なので、和=(1+34)×12÷2=35×6=210
●群数列
(ここに問題が入る)
(ここに答えが入る)
(ここに問題が入る)
(ここに答えが入る)
(ここに問題が入る)
(ここに答えが入る)
(ここに問題が入る)
(ここに答えが入る)

結果と改善点

モバイル表示での縦並び→確認

印刷表示→レイアウトは悪くないが、縦の区切り線が消えてしまう。borderの太さの一次関数の切片をもう少し上にする。
→試してみたが「qst」と「ans」の切り替わりにそろえると印刷では表示できない…
→印刷す場合に「Prt」タグに入れるか、borderの太さの1次関数の切片を印刷画面に合わせて調整した後で「qst」「ans」の切り替わりをそれにあわせて調整する
→1次関数の切片の最大は790pxのようだ。これに合わせて「qst」「ans」の切り替わりを調整しようとしたら、だいたい一致していたwラッキー

見出しをそれらしくして完成にするか

試作ベータ

 

タイトルとURLをコピーしました