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

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の太さの一次関数の切片をもう少し上にする。

試作ベータ

仕様

 

試作ベータ

 

改善点

 

れれれ

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