# 【Html&Cssで作る四択クイズゲーム開発記録⑤】Sassリストでクイズの問題を動的に管理する |p2>2022/01/11{3}できるだけCSS(Sass)を使ってアプリを作成する{1}Sassリスト: ( <ステージ名>: ( <ステージ番号>, <問題のタイトル>, (<４つの選択肢>), <正解の選択肢の番号>, <色(色コード)> ), ... ); ``` というようにマイナーチェンジしています。設問のテキストの内容だけではなく、色コードのような各設問ステージの属性値もSassリストに集約することで、あとは自由にSassコードの中で設定値を呼び出すようにできます。例えば以下は、ステージ毎のテキストの色をSassリストから設定している修正箇所です。 ```scss styles.scss(修正後)の一部を抜粋 //...中略 &--main { display: flex; align-items: center; justify-content: center; label { flex: 0 0 auto; margin: 0 auto; } @for $i from 2 through length($stages) { $item: nth($stages,$i); // 👈$stagesリストの子要素 'stage*': (...) を順番に取得 $item: nth($item,2); // 👈取得した$stagesリストの子要素の中身 (...) を再度取得 &--#{nth($item,1)} { // 👈nth($item,1)はステージ番号 color: nth($item,5); // 👈nth($item,5)は色コード font-size: 22px; } } } //...中略 ``` 今回の修正では上のようなSassリストを使った細かい修正が何箇所かあります。リストから値を取得する`nth関数`の扱いを理解できていれば対応できると思いますので、ここでは全ての修正箇所を説明するのは割愛いたします。結論としては、|px>{3}Sassを使うことで、従来のCSSには不向きだったコード側からのデータ管理も簡単に行えるようになった { return {stageName: `stage${m+1}`, checkbox: `checkmark${m+1}`}; }).forEach(g => { document.getElementById(g.stageName).addEventListener("change", (e) => { document.getElementById("gamestate").textContent += document.getElementById(g.checkbox).checked ? '⭕ ' : '❌ '; checkGameOver() && checkSum(); }); }); ``` ついでに言うと、[前回登場させたshiftGamgeState関数](/blog/73#part-h3-0-h2-0)もforEachのアロー関数の中に組み込んで今回の修正でお役御免としています。 ### 三項演算子を上手く活用する基本は`if ~ else if ~ else`の条件分岐構文を使うと読みやすいのですが、こなれてくるともう少しコンパクトにJavascript部分を圧縮したい時があります。 [条件三項演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)を使うと、条件分岐がほんのちょっと短く書ける可能性があります。今回では折角全６問になったので、全問正解の場合に表示されるメッセージを、以下のようにこの三項演算子で分岐してみました。 ```js //...中略 function checkSum() { let result = 0, total = 0; document.querySelectorAll("input[id^='checkmark']").forEach((checkItem) => { checkItem.checked && result++; total++; }); //👇ここを追加 document.getElementById("score").textContent = result == total ? `全問正解🎉あなたは「タコマスター」の称号を得ました！！` : `正解率は ${result}/${total} でした。`; } //...中略 ``` もう少し設問数が多くなって、正答率ごとにメッセージを切り分けたいときには、 ```js クリアメッセージ = 条件1 ? "もっと頑張りましょう" : 条件2 ? "なかなかの成績です" : 条件3 ? "かなり優秀です" : "完全制覇！" ``` などのようにswitch ~ case構文のような使い道もできます。三項演算子は便利ですので、使い慣れておかれると少しだけ快適なJavascriptコーディングが可能になるでしょう。 - - - &[self]~[4]~[article]~(1) ## まとめ今回はSassリストにスタイルのみならず、ミニゲームのデータを一つに集約させて管理しやすくする方法を検討してみました。やはり一般の大規模なゲームならばゲームデータはデータベースとして別に切り離して使う方が圧倒的に理に適っていると思いますが、ミニゲーム程度でなら静的ソースコードにハードコーディングで埋め込んでみても手間がかからず楽に作業できておすすめです。今回で大方の四択クイズミニゲームの機能としては十分完成したような気がしますが、次回はもう少し高度にHTMLのDOM操作のリファクタリングをやってみたいと思います。 ## 付録〜改良前のソースコード(バックアップ) 今回も恒例の古くなったソースコード(バージョン0.5)のバックアップを付録として掲載しておきます。 ### index.html ```html index.html(ver.0.5) ``` ### styles.scss ```scss style.scss(ver.0.5) #game-wrapper { width: 100%; height: 300px; background-color: darkgray; box-sizing: border-box; position:relative; input { display: none; } .game-header { position: absolute; top: 0; left: 0; background: #220c0c; color: #ceeece; z-index: 1; margin: 0; font-size: 22px; padding: 6px 0 6px 0; width: 100%; } .stage { position: absolute; display: block; width: 100%; height: 100%; font-size: 24px; &--op { display: flex; align-items: center; justify-content: center; label { display: block; flex: 0 0 auto; margin: 0 auto; animation: flash 1s linear infinite; } } &--main { display: flex; align-items: center; justify-content: center; label { flex: 0 0 auto; margin: 0 auto; } @each $key, $val in (1:blue, 2:rgb(231, 185, 99), 3:rgb(211, 51, 203)) { &--#{$key} { color: $val; font-size: 22px; } } } &--end { display: flex; align-items: center; justify-content: center; flex-direction: column; background: darkgray; label { flex: 0 0 auto; display: inline-block; font-weight: bold; padding: 0 0 0 0; text-decoration: none; color: #00BCD4; background: #ECECEC; margin: 0 auto; animation: flash 1s linear infinite; } } @keyframes flash { 0%,100% { opacity: 1; } 50% { opacity: 0; } } } .stage--main { ul.flexlist { border: 1px solid #666; display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; margin: 10px auto 2px; padding: 0; width: 300px; li { border: 1px solid #aaa; line-height: 110%; margin: 5px 2px 5px 2px; padding: 8px; text-align: center; width: 35%; &:hover { color: chartreuse; } &::after { content: "wrong"; visibility: hidden; display: block; width: 0; height: 0; } } } } #stage { &---op {display: flex} @each $item in (1, 2, 3, reset) { &---#{$item} { display: none; } } } $stages: ( 'start' : ('op', ''), 'stage1': ('1', 'タコの足は何本？', ('５本', '８本', '１０本', '足はない'), 2), 'stage2': ('2', 'タコは何動物？', ('地球外生物', '緩歩動物', '実は植物', '軟体動物'), 4), 'stage3': ('3', 'タコの水揚げ量が世界一の国？', ('中国','カナダ','モーリタニア','日本'), 1) ); @for $i from 1 through length($stages) { $item: nth($stages, $i); $item: nth($item,1); ##{$item}:checked ~ { $item: nth($stages, $i); $item: nth($item, 2); $item: nth($item,1); #stage---#{$item} {display: none} @if $i == length($stages) { #stage---reset { display: flex; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards; } } @else { $item: nth($stages, $i + 1); $item: nth($item,2); $item: nth($item,1); #stage---#{$item} { display: flex; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards; $item: nth($stages, $i + 1); $item: nth($item,2); $item: nth($item,2); label::before { content: '問題#{$i}：#{$item}'; } $item: nth($stages, $i + 1); $item: nth($item,2); $quiz_option: nth($item,3); $answer: nth($item,4); @for $j from 1 through length($quiz_option) { ul.flexlist { li:nth-child(#{$j}) { &::before {content: '#{nth($quiz_option,$j)}';} @if $j == $answer { &::after { content: "#{nth($item,1)}/correct"; } } } } } } } } } @keyframes fadeIn { 0% { display: none; opacity: 0; } 1% { display: flex; opacity: 0; } 100% { display: flex; opacity: 1; } } } ```