Bu makalemizde AÖF’e çalışırken sürekli test sorularının şıklarını bir yere not almaktan sıkıldığımdan [jquery, css, js] birleşimi ile basit bir cevap anahtarı hazırladım amacım dinamik olarak girmiş olduğumuz sayı kadar cevap anahtarı oluşturabilmek ve seçim yapabilmek.
Şimdi Örnek kodlarımıza geçelim öncelikle makalemizin girişinde jquery, css ve js birleşimlerinden hazırlandığını belirtmiştik bu makalemizdeki örneğin çalışması için jquery kütüphanesini head etiketleri arasında belitmelisiniz örnek jquery kütüphanesi koduna alttan ulaşabilirsiniz
1 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"> |
Örnek JS Kodumuz
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <script type="text/javascript"> $(document).ready(function () { var count = prompt("Kaç tane soru oluşturulsun?","80"); for (var i = 0; i < count; i++) { var ulelement = document.createElement("ul"); var header = document.createElement("h1"); header.innerHTML = "Soru " + (i+1); ulelement.appendChild(header); for (var j = 0; j < 5; j++) { var lielement = document.createElement("li"); switch(j){ case 0: lielement.innerHTML = "A"; break; case 1: lielement.innerHTML = "B"; break; case 2: lielement.innerHTML = "C"; break; case 3: lielement.innerHTML = "D"; break; case 4: lielement.innerHTML = "E"; break; } lielement.setAttribute("question",i); ulelement.appendChild(lielement); }; ulelement.setAttribute("question",i); var btn = document.createElement("input"); btn.setAttribute("type","button"); btn.setAttribute("value","Yanlış Cevap") btn.setAttribute("onclick","Cevap("+i+")"); ulelement.appendChild(btn); var questions = document.getElementById("questions"); questions.appendChild(ulelement); }; $("ul li").click(function() { var a = $(this).attr("question") $("ul[question="+a+"]").find("li").css({"background-color":"yellow","text-decoration":"none"}).removeClass("active"); $(this).css("background-color","red").addClass("active"); }) }); function Cevap(deger) { $("ul[question="+deger+"] li[class=active]").css("text-decoration","overline"); } |
Örnek CSS Kodlarımız
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <style type="text/css"> *{ padding: 0; margin: 0; } #questions ul{ display: block; clear: both; padding: 10px; border-radius: 5px; background-color: #f5f5f5; } #questions ul input{ float: left; padding: 5px; } #questions ul li{ float: left; list-style-type: none; padding: 5px 15px; background-color: yellow; margin-right: 5px; border-radius: 50px; } </style> |
Javascript kodları içerisinde dinamik olarak oluşturduğumuz için cevap anahtarlarını ben cevap anahtarlarının tamamını body tag’leri arasında div etiketi açarak id’sinede ‘questions’ isimlendirmesiyle ayarladım ve dinamik olarak bu div altına ekliyoruz yani body tagleri arasına alttaki kodu yazınız…
HTML Kodu
1 2 3 | <div id="questions"> </div> |
