3種類の算数記事「A小問なし」「B連続小問形式(誘導または関連性のある小問が並んでいる)」「C独立小問形式(関連性の無い小問が並んでいる)」のうち、Aは「L-qst1」を改造、Cは「L-qst2」で構成、Bは「L-qst2」で構成(予定)だったが、これを「L-qst3」一つで再現する。
目次(クリックでジャンプ)
Web版
独立小問形式
コピーした「L-qst3」で独立小問形式表示ができているかテスト
重畳クラス「rui」を付けると類題仕様で解答がベロ出し式になる(ここでは確認のため「rui」をつけていない)。
修正項目)ベロ出しの復活が速すぎる。現在7秒なのを30秒ほどに
仕様の確認
大問全体「L-qst3」の内部に「title(大問のタイトル)」「Lq-txt(大問の設問)」「ctt(内容)」
「ctt」の内部に「S-qst(小問)」が並んでいる。
小問全体「S-qst」の内部には「Sq-txt(小問設問)」「xpln(解説)」「A-clm2(解答欄)」が並ぶ
「xpln」の内部にはテキスト(できれば「txt」divに入れる)と図「Z-box1」(コンテナに入れずむき出し配置)が入る。
解答欄が不要な小問(答えが図など)は重畳クラス「S-qst no-A」で解答欄非表示(コードを削除する必要なし)と下パディングをゼロに。
➊小問の解説文章。小問の解説文章。
➋小問の解説文章。小問の解説文章。小問の解説文章。
小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。
小問の設問文章。小問の設問文章。
小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。
デベロッパーツールで「rui」をつけて動作確認済み。
修正項目(覚書)
解説のアニメーション
解説(xpln)ベロ出し効果の時間調整を「L-qst1」で試行錯誤した結果をメモ(自分で作ったけど、もう忘れていたw)。
アニメーションするのは➀xpln本体と②ガイド表示(隠し紙兼用)。
ポインタホバーで②ガイド表示が1sかけて「広がり変形」する(点線と色は1秒待って0秒変形、background(隠し紙の色)は1秒待って0.5秒変形)。➀xpln本体は1s(②の変形時間)待って1sかけて高さを「ベロ出し変形」(ガイドを表示するスペースのpadding-topのみ0s変形)
ポインタ外しで➀本体が4秒待って3秒で変形(padding-topのみ0秒変形)。②ガイドが7秒待って0.5秒変形(backgroundのみ3秒待って3.5秒で変形)
↓こちらを30秒くらい待ちにする。
ポインタ外しで➀本体が28秒待って2秒で変形(padding-topのみ29秒待って1秒変形)。②ガイドが30秒待って0.5秒変形(backgroundのみ23秒待って7秒で変形) 変更済み
解答欄のアニメーション
解答欄ではなく解説にホバーした時に文字を出す
隣接セレクタを使って「.xpln:hover+.A-clm2{～}」と指定する。
連続小問形式
間に説明が入るような問題(特に例題)用。S-qstに重畳クラス「w」を指定して「S-qst W」にするとwidth:100%;になって「.ctt」幅いっぱいに広がる。
広がったS-qst下のxplnは自動的にdisplay:flex;になって内部を折り返す。文字は制御用の「txt」divに手動で入れる。「txt W」にすると文字だけの一段組になる。また図解ボックス「Z-box1」も自動的に幅が最大45%に抑えられる
修正項目)偶数番目の小問だけに左ボーダーをつけていたのを廃止する。(左ボーダーつけたい時だけ重畳クラスをつけるか?)
➋小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。
小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。
小問の設問文章。小問の設問文章。小問の設問文章。小問の設問文章。
小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。
デベロッパーツールで「rui」をつけて動作確認済み。
小問無し
次に、小問なしを表示するテスト
小問(S-qst)を一つだけ残して重畳クラス「W」で幅広にする。さらに小問設問(Sq-txt)を消すと小問番号は消える。
折返しを制御するには、文字をdivに入れないと難しいので「txt」divに入れる。重畳クラス「txt W」で幅広の字のみ一段組になる。
解説文章。解説文章。解説文章。解説文章。解説文章。解説文章。解説文章。解説文章。解説文章。➊小問の解説文章。小問の解説文章。
➋小問の解説文章。小問の解説文章。小問の解説文章
デベロッパーツールで「rui」をつけて動作確認済み。
動作確認
iPad(非pro)の縦持ちで二段組にするように「S-qst」の幅を調整した。
Z-boxが2つ続くと並んで小さくなってしまう→
ここまでで、Web上の表示は成功。
印刷表示のテスト
独立小問形式
この後から「PrtA3」divに入れる
➊小問の解説文章。小問の解説文章。
➋小問の解説文章。小問の解説文章。小問の解説文章。
小問の解説文章。小問の解説文章。小問の解説文章。
小問の設問文章。小問の設問文章。
小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。
レイアウトは印刷画面を確認。デベロッパーツールで「Q2」でも確認済み。大問のヒントの表示がちょっとずれてる(修正済み)。この4問で紙がほぼ一杯になりそう。
デベロッパーツールで三段組にするテストをしてみたところ、S-qstの幅を225pxまで小さくすればいけた。解答欄が大きすぎるので調整が必要だが
答えの文字が濃すぎる…→修正済み
連続小問形式
ここから「PrtA3」に入れる
➋小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。
小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。
小問の設問文章。小問の設問文章。小問の設問文章。小問の設問文章。
小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。小問の解説文章。
印刷画面で確認
小問なし
ここから「PrtA3」に入れる
➋図の説明文章。図の説明文章。図の説明文章。図の説明文章。
印刷確認で確認。デベロッパーツールでPrtQ2も確認。
解答部分が真っ白で気になる(方眼のような背景を敷くか？)→通常画面の横罫を背景に設定済
これで
一応、完成を見たかな
残る課題
L-qstのタイトルのストライプをボックスシャドウで表現しているせいで全体に輪郭が浮き出ている。ボックス全体のシャドウなのであまりに大掛かりすぎるようだｗ。もっと単純な仕組みのストライプにする。もともとのタイトル背景(QT31aとb)を利用しても良い。位置も絶対指定(初期のプリントの名残り)になっているのをデフォルトに戻してシンプルに
→位置を相対指定には戻せなかったが、印刷画面ではボックスシャドウのストライプを廃止しbefore要素で「問題」「類題」を反転文字としてワンポイントにした。
L-qst全体に地の背景と違うイメージを敷き詰めて「場」を作る。方眼？
タイトルの単純化
L-qst全体のbox-shadowとpadding-topを切る。
titleのdisplay:inline-block;を切って、position:relative;に。左にbefore要素(「問題」や「類題」)を入れるパディング2.6em設定
コピーライトをL-qstの付属要素からtitleの付属要素afterにする
配色を黒白パターンに。文字のcolorを白に暫定的に旧デザイン(QT31)のストライプを当てておく
例題(a)
background:linear-gradient(to right,#0c8080 -30%,#afdba800
89%),repeating-linear-gradient(#7bbc7b,#7bbc7b 3px,#afdba8 3px,#afdba8 5px);
類題(b)
linear-gradient(to right,#0061c3 -30%, #8fe2eb00),repeating-linear-gradient(#4ea7d9,#4ea7d9 3px,#8fe2eb 3px,#8fe2eb 5px)
追加(2020.11.1)
実戦投入する中で、例題は類題と大きく仕様を変えないといけないことに気づいた。
基本的に、例題中では小問は幅広をデフォルトにする。「S-qst」を格納している「ctt」のflexを切る。というか、ruiの中でだけflexにするか？(済)。
新設要素
小問間の解説やまとめ用の「inter」クラスを設置(済)