Quiz

dabblet.css

/**
 * Quiz
 */

label
{
	display: inline-block;
	line-height: 1.5em;
	margin-right: 2em;
	width: 2em;
}

label::after
{
	visibility: hidden;
	font-size: 1.4em;
	margin-left: 0.5em;
}

#solution:target label::after
{
	visibility: visible;
}
		
:checked + label::after
{
	color: red;
	content: '✘';
}

[value="true"] + label::after
{
	color: lightgreen;
	content: '☚';
}

[value="true"]:checked + label::after
{
	color: green;
	content: '✔';
}

a
{
	background: linear-gradient(#f8f8fa, #eeeef0 50%, #e8e8ea 50%, #dddddf);
	border-radius: 666em;
	box-shadow: 0.1em 0.1em 0.1em #666;
	color: inherit;
	display: inline-block;
	padding: 0.5em 1em;
	text-decoration: none;
	width: 10em;
}

#solution:not(:target) [href="#"],
#solution:target [href="#solution"]
{
	display: none;
}

dabblet.html

<form id="solution">
	<p>
		<input type="radio" name="q1" id="q1a" value="true"/>
		<label for="q1a">a</label>
		<input type="radio" name="q1" id="q1b" value="false"/>
		<label for="q1b">b</label>
		<input type="radio" name="q1" id="q1c" value="false"/>
		<label for="q1c">c</label>
	</p>
	<p>
		<input type="radio" name="q2" id="q2a" value="false"/>
		<label for="q2a">a</label>
		<input type="radio" name="q2" id="q2b" value="true"/>
		<label for="q2b">b</label>
		<input type="radio" name="q2" id="q2c" value="false"/>
		<label for="q2c">c</label>
	</p>
	<p>
		<a href="#solution">Auflösung anzeigen</a>
		<a href="#">Auflösung verstecken</a>
	</p>
</form>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}