設定ファイルを編集する
KNQuizの懸賞をカスタマイズするには、KNQuizの設定ファイル( myapp001/settings.js )を編集します。
このページでは懸賞をカスタマイズするための必要最小限の編集を行うます。
(設定ファイルに関するより詳しい解説は、設定ファイルを参照してください。)
設定ファイル( myapp001/settings.js )を編集するには、メモ帳のようなテキストエディタで設定ファイルを開いてください。これで編集の準備が整いました。
1. クイズを書き込む
まず最初は、設定ファイル内に記載されたクイズを編集しましょう。
クイズを編集するには、以下の手順に従ってください。
1. 「HTMLの設定」のセクションを編集する
設定ファイル内のHTMLの設定のセクション(下参照)を見つけてください。
//-------------------- // HTMLの設定 //-------------------- cfg.html=String.raw` <div class="knquiz knquiz-reset"> <div class="knquiz-back"></div> <div class="knquiz-front"> <div class="knquiz-heading"> <div class="knquiz-title"> クイズに答えて懸賞に<span class="knquiz-inbl">応募しよう!</span> </div> <div class="knquiz-desc"> 電気を作るのには、様々な方法がありますが、<span class="knquiz-highlight">「地上の太陽」と例えられる発電方式は何でしょう?</span> 下の<span class="knquiz-card-icon">?</span>カードの中に、<span class="knquiz-inbl">ヒントが隠れています!</span> </div> </div><!--/knquiz-heading--> <div class="knquiz-body"> <div class="knquiz-game"> <div class="cdgrid"></div> </div> </div><!--/knquiz-body--> <div class="knquiz-footer"> <div class="knquiz-instruction"> 答えがわかった方は、下の欄に答えを記入して<span class="knquiz-highlight">「応募する」</span>をクリックして<span class="knquiz-inbl">ください。</span> </div> <div class="aplform"> <div class="aplform-form-group"> <div class="aplform-label"> ➤ 「地上の太陽」と例えられる発電方式は何? </div> <div class="aplform-input-group"> <input class="aplform-input" type="text" name="answer" placeholder="答えをここに記入"/> <div class="aplform-submit" tabindex="0"> <div class="aplform-submit-back"></div> <div class="aplform-submit-label">応募する</div> </div> </div><!--/aplform-input-group--> </div><!--/aplform-form-group--> </div><!--/aplform--> </div><!--/knquiz-footer--> </div><!--/knquiz-front--> </div><!--/knquiz--> `;
2. クイズに関する文言を編集する
上記のコード内でハイライトされた文がクイズに関する部分です。これを編集してクイズの内容を変更してください。それ以外の文言もお好きに変更して問題ありません。
さてハイライトされた部分に使用されている、以下のHTMLタグを説明します。
<span class="knquiz-highlight">...</span>
<span class="knquiz-inbl">...</span>