このページでは、設定ファイルの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-->

`;

HTML内の「クイズに答えて。。。」や「答えがわかった方は。。。」などの文言は自由に変更できます。

文言の中で以下のように <span>...</span> タグが使用されているケースがあります。

電気を作るのには、様々な方法がありますが、<span class="knquiz-highlight">「地上の太陽」と例えられる発電方式は何でしょう？</span>
下の<span class="knquiz-card-icon">?</span>カードの中に、<span class="knquiz-inbl">ヒントが隠れています！</span>

以下にこれらの <span> タグの役割を説明します。

このタグで文言を囲むと、その部分が強調されて表示されます。どのように強調されるかはCSSによって決まります。

このタグはヒントカードを表現する「？」にスタイルを付加するのに使用します。どのようなスタイルが付加されるかはCSSによって決まります。

このタグで文言を囲むと、囲まれた文言内での折り返しを防ぐことができます。例えば、次の文を考えてみてください、

春のキャンペーン懸賞へようこそ！ クイズに答えて懸賞に応募しよ
う!

デイスプレイのサイズによっては、上記のように文が二行に渡る場合があります。文節で折返してくれると読みやすいのですが、運が悪いと「う!」の部分だけが次の行へ渡る場合があります。さてここで、以下のように <span class="knquiz-inbl">...</span> で「応募しよう!」を囲んだとします。

春のキャンペーン懸賞へようこそ！ クイズに答えて懸賞に<span class="knquiz-inbl">応募しよう!</span>

この場合、改行が必要ならば「応募しよう!」の前で改行が起きるので読みやすくなります。

春のキャンペーン懸賞へようこそ！ クイズに答えて懸賞に
応募しよう!