Logo Luan Morina
Pyetësor i thjeshtë (Kuiz) me jQuery Ajax
Demonstrim

1. Cili vend i ka 30 milionë dele?

2. Cili vend quhej dikur Svithiod?

3. Cili vend quhej dikur Krahinat e Bashkuara?

4. Cili vend i ka 4,970 kilometra bregdet?

5. Si quhej Australia pas zbulimit të saj?

HTML
<div class="mbajtesi-me-demonstrim">
<form action="" method="post" id="formDemo">
<h4>Cili vend i ka 30 milionë dele?</h4>
<div class="mbajtesi-me-pyetje">

<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-01" id="pyetja-01-A" value="A" required />
<label for="pyetja-01-A">Australia</label>
</div>

<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-01" id="pyetja-01-B" value="B" />
<label for="pyetja-01-B">Kina</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-01" id="pyetja-01-C" value="C" />
<label for="pyetja-01-C">Argjentina</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-01" id="pyetja-01-D" value="D" />
<label for="pyetja-01-D">Holanda</label>
</div>
</div>
<h4>Cili vend quhej dikur Svithiod?</h4>
<div class="mbajtesi-me-pyetje">

<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-02" id="pyetja-02-A" value="A" required />
<label for="pyetja-02-A">Spanja</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-02" id="pyetja-02-B" value="B" />
<label for="pyetja-02-B">Suedia</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-02" id="pyetja-02-C" value="C" />
<label for="pyetja-02-C">Sllovakia</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-02" id="pyetja-02-D" value="D" />
<label for="pyetja-02-D">Sllovenia</label>
</div>

</div>

<h4>Cili vend quhej dikur Krahinat e Bashkuara?</h4>

<div class="mbajtesi-me-pyetje">
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-03" id="pyetja-03-A" value="A" required />
<label for="pyetja-03-A">Shqipëria</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-03" id="pyetja-03-B" value="B" />
<label for="pyetja-03-B">Holanda</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-03" id="pyetja-03-C" value="C" />
<label for="pyetja-03-C">Gjermania</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-03" id="pyetja-03-D" value="D" />
<label for="pyetja-03-D">Italia</label>
</div>
</div>

<h4>Cili vend ka 4,970 kilometra bregdet?</h4>
<div class="mbajtesi-me-pyetje">
<div class="form-check"> 
<input type="radio" class="form-check-input" name="pyetja-04" id="pyetja-04-A" value="A" required />
<label for="pyetja-04-A">Zvicra</label>
</div> 
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-04" id="pyetja-04-B" value="B" />
<label for="pyetja-04-B">Irlanda</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-04" id="pyetja-04-C" value="C" />
<label for="pyetja-04-C">Islanda</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-04" id="pyetja-04-D" value="D" />
<label for="pyetja-04-D">Gjermania</label>
</div>
</div>

<h4>Si quhej Australia pas zbulimit të saj?</h4>

<div class="mbajtesi-me-pyetje">
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-05" id="pyetja-05-A" value="A" required />
<label for="pyetja-05-A">Zelanda e Re</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-05" id="pyetja-05-B" value="B" />
<label for="pyetja-05-B">Holanda e Re</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-05" id="pyetja-05-C" value="C" />
<label for="pyetja-05-C">Anglia e Re</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="pyetja-05" id="pyetja-05-D" value="D" />
<label for="pyetja-05-D">Suedia e Re</label>
</div>
</div>

<div class="mbajtesi-me-mesazh">
<div id="mesazhi"></div>
</div>
<div class="mbajtesi-me-pulle">
<input type="submit" value="Dorëzo për vlerësim " id="pullaPerDorezim" class="btn btn-secondary pulla-per-dorezim" />
</div>

</form> 
</div>

<script>
$(function () {
$("#mesazhi").html("Zgjidh njërën nga përgjigjet");
$('#formDemo').on('submit', function (event) {
$.ajax({
type: 'post',
url: 'rezultati.php',
data: $('form').serialize(),
success: function (data) {
$("#mesazhi").html(data);
}
});
event.preventDefault();
});
});
</script>
CSS
.mbajtesi-me-demonstrim {
margin: 4em auto;
max-width: 600px;
}
h4 {
font-size: 1em;
border-bottom: 1px dashed #ececec;
}

.mbajtesi-me-pyetje  {
margin-bottom: 2em;
}

.fusha-gabim {
margin-top: 20px;
background-color: rgba(112, 0, 0, 0.2);
padding: 4px 10px;
border-radius: 4px;
}

.mbajtesi-me-pulle  {
margin-top: 2em;
text-align: right;
}

.pulla-per-dorezim {
width: 160px;
text-align: center;
}

.mbajtesi-me-mesazh {
background-color: rgba(255, 118, 0, 0.20);
border-radius: 4px;
text-align: center;
margin: 1em 0;
padding: 4px 20px;
}
PHP (pas postimit)
<?php
// përgjigjet nga formulari:
$pergjigjja_01 = $_POST['pyetja-01'];
$pergjigjja_02 = $_POST['pyetja-02'];
$pergjigjja_03 = $_POST['pyetja-03'];
$pergjigjja_04 = $_POST['pyetja-04'];
$pergjigjja_05 = $_POST['pyetja-05'];
// ndryshorja e numërimit
$gjithsejSakte = 0;
// për secilën përgjigje të saktë, shto një numër
if ($pergjigjja_01 == "C") { $gjithsejSakte++; }
if ($pergjigjja_02 == "B") { $gjithsejSakte++; }
if ($pergjigjja_03 == "B") { $gjithsejSakte++; }
if ($pergjigjja_04 == "C") { $gjithsejSakte++; }
if ($pergjigjja_05 == "B") { $gjithsejSakte++; }
// trego këtë përmbajtje në faqe
echo "<strong>" . $gjithsejSakte . "</strong> përgjigje të sakta nga gjithsej 5";
?>