Example of Accessible Online QA Form

http://www.dte.web.id

by Taufik Nurrohman

HTML

<form class="qa-form" id="qa-form" action="#">
    <ol>
        <li>
            <p>Tahap komunikasi untuk penyandaran terhadap masyarakat yang diharapkan dapat mengadopsi inovasi yang ditawarkan merupakan adopsi inovasi pada tahap ...</p>
            <label>
                <input type="radio" name="a-1" /> A. Design</label>
            <label>
                <input type="radio" name="a-1" /> B. Evaluation</label>
            <label>
                <input type="radio" name="a-1" /> C. Trial</label>
            <label>
                <input type="radio" name="a-1" /> D. Wareness Interest</label>
            <label>
                <input type="radio" name="a-1" /> E. Wareness Trial</label>
        </li>
        <li>
            <p>Apabila tuntutan dari luar berlawanan dengan keinginan maka seseorang akan mengalami emosi ...</p>
            <label>
                <input type="radio" name="a-2" /> A. Marah</label>
            <label>
                <input type="radio" name="a-2" /> B. Gembira atau senang</label>
            <label>
                <input type="radio" name="a-2" /> C. Sedih</label>
            <label>
                <input type="radio" name="a-2" /> D. Takut</label>
        </li>
        <li>
            <p>Portfolio sangat tepat digunakan untuk asesmen oleh guru, Terutama sekali ...</p>
            <label>
                <input type="radio" name="a-3" /> A. Selama pembelajaran berlangsung</label>
            <label>
                <input type="radio" name="a-3" /> B. Ketika akan dimulai pembelajaran</label>
            <label>
                <input type="radio" name="a-3" /> C. Pada saat putus cinta</label>
            <label>
                <input type="radio" name="a-3" /> D. Jawaban benar semua</label>
            <label>
                <input type="radio" name="a-3" /> E. Jawaban salah semua</label>
        </li>
    </ol>
    <p>
        <button type="submit">Simpan Jawaban</button>
        <button type="reset">Set Ulang...

CSS

* {
  margin:0;
  padding:0;
}

body {
  font:normal normal 14px/1.4 Arial,Sans-Serif;
  background-color:white;
  color:black;
}

.qa-form {padding:1em 1em 2em}

.qa-form ol,
.qa-form li,
.qa-form p,
.qa-form input,
.qa-form label {
  margin:0;
  padding:0;
}

.qa-form ol {
  list-style:decimal outside;
  margin:0 0 2em 3em;
}

.qa-form p {
  margin:1em 0;
  clear:both;
}

.qa-form label {
  display:block;
  width:300px;
  cursor:pointer;
  overflow:hidden;
  padding:5px 10px 5px 6px;
  margin:0 0 2px;
  line-height:100%;
  border-radius:20px;
}

.qa-form label input {
  outline:none;
  vertical-align:top;
  cursor:inherit;
}

.qa-form button {
  cursor:pointer;
  padding:.2em 1em;
}

.qa-form label:hover {background-color:whitesmoke}
.qa-form label:active {background:none}

.qa-form label.selected {
  background-color:forestgreen;
  color:white;
}

JavaScript

$('#qa-form :radio').on("change", function() {
    $(this).parent()[this.checked ? "addClass" : "removeClass"]('selected').siblings().removeClass('selected');
});
$('#qa-form :reset').on("click", function() {
    $(this).closest('form').find('label').removeClass('selected').children().prop('checked', false);
});