Final Sınavı - Web Tabanlı Kodlama

Soru 1:

Form alanına 6 Şubat 2018 şeklinde veri girilmesi isteniyorsa form tasarım komutu aşağıdakilerden hangisi olmalıdır?

A) B) C) D) E)

Soru 2:

Aşağıdaki ortam sorgularından hangisinde bilgisayar, tablet, cep telefonu gibi cihazların ekranlarının kullanılması durumunda (screen) ve tarayıcı penceresinin genişliğinin en fazla 500px olması durumunda nav etiketinin genişliğinin 100% olacağı belirtilmiştir.

A) @media only screen and (max-width: 500px) {nav { width: 100%;}} B) @media only print and (max-width: 500px) {nav { width: 100%;}} C) @media not screen and (max-width: 500px) {nav { width: 100%;}} D) @media only screen and (max-width: 600px) {nav { width: 100%;}} E) @media only screen and (max-width: 500px) {nav { width: 80%;}}

Soru 3:

"..................................... HTML elemanlarının diğer elemanlarla arasındaki mesafeyi ayarlamak için kullanılmaktadır." şeklinde ifade edilen özellik aşağıdakilerden hangisidir?

A) Marjin özelliği B) Width özelliği C) Max-width özelliği D) Position özelliği E) Overflow özelliği

Soru 4:

Kullanıcının sayı değeri belirleyebilmesi için bir kaydırma çubuğu oluşturan form elemanı aşağıdakilerden hangisidir?

A) Number (Sayı) B) Range (Aralıklı Kaydırma) C) Search (Arama) D) Button (Düğme) E) Fieldset ve Legend (Gruplayıcı ve Başlık)

Soru 5:

Aşağıdakilerden hangisi, etiketi içinde yer alan özelliklerden olan action ın tanımıdır?

A) Form verilerinin gönderilmesinde hangi HTTP yönteminin kullanılacağını belirtir. B) Form verilerinin sunucuda nereye gönderileceğini belirtir. C) Forma bir isim verilmesini sağlar. D) Form verilerinin hangi karakter kodlamasınıkabul edeceğini belirtir. E) Form verilerinin hangi karakter kodlamasını kabul edeceğini belirtir

Soru 6:

Flash animasyonları ile pdf dosyaları eklemek için hangi etiket kullanılır?

A)

B) C) </label> <label class="block"> <input type="radio" name="soru_2221736" value="d" class="mr-2 answer-option" data-soru-id="2221736" data-dogru="False"> D) <head> </label> <label class="block"> <input type="radio" name="soru_2221736" value="e" class="mr-2 answer-option" data-soru-id="2221736" data-dogru="True"> E) <embed> </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221736">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221736-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221736"> Doğru Cevap: E) <embed> </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 7:</h3> <p class="text-gray-700 mb-4">Resimli düğmenin resmi sayfaya yüklenemediği durumlarda metin olarak düğmenin işlevini ifade eden ve resmin yerine geçen input özelliği aşağıdakilerden hangisidir?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221737" value="a" class="mr-2 answer-option" data-soru-id="2221737" data-dogru="False"> A) accept </label> <label class="block"> <input type="radio" name="soru_2221737" value="b" class="mr-2 answer-option" data-soru-id="2221737" data-dogru="True"> B) alt </label> <label class="block"> <input type="radio" name="soru_2221737" value="c" class="mr-2 answer-option" data-soru-id="2221737" data-dogru="False"> C) checked </label> <label class="block"> <input type="radio" name="soru_2221737" value="d" class="mr-2 answer-option" data-soru-id="2221737" data-dogru="False"> D) pattern </label> <label class="block"> <input type="radio" name="soru_2221737" value="e" class="mr-2 answer-option" data-soru-id="2221737" data-dogru="False"> E) value </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221737">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221737-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221737"> Doğru Cevap: B) alt </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 8:</h3> <p class="text-gray-700 mb-4">Tablolarda kullanılan kavramsal sınıflardan "active"in anlamı nedir?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221738" value="a" class="mr-2 answer-option" data-soru-id="2221738" data-dogru="True"> A) İçeriği vurgulamak için kullanılır. </label> <label class="block"> <input type="radio" name="soru_2221738" value="b" class="mr-2 answer-option" data-soru-id="2221738" data-dogru="False"> B) Olumlu ya da başarılı bir içeriği belirtir. </label> <label class="block"> <input type="radio" name="soru_2221738" value="c" class="mr-2 answer-option" data-soru-id="2221738" data-dogru="False"> C) Düşük vurgulu, bilgilendirici içerikleri belirtir. </label> <label class="block"> <input type="radio" name="soru_2221738" value="d" class="mr-2 answer-option" data-soru-id="2221738" data-dogru="False"> D) Okuyucu dikkatini gerektiren içerikleri belirtir. </label> <label class="block"> <input type="radio" name="soru_2221738" value="e" class="mr-2 answer-option" data-soru-id="2221738" data-dogru="False"> E) Olumsuz ya da tehlikeli içerikleri beliritr. </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221738">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221738-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221738"> Doğru Cevap: A) İçeriği vurgulamak için kullanılır. </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 9:</h3> <p class="text-gray-700 mb-4">Günümüzde bir çok web sayfası tasarımında grid yapısı kullanılmaktadır. Hatta bir çok CSS kütüphanesi grid kullanımını destekleyecek araçlar sunmaktadırlar. Grid kullanımı ile genel olarak sayfa genişliği kaç tane eşit parçaya bölünür?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221739" value="a" class="mr-2 answer-option" data-soru-id="2221739" data-dogru="False"> A) 10 </label> <label class="block"> <input type="radio" name="soru_2221739" value="b" class="mr-2 answer-option" data-soru-id="2221739" data-dogru="True"> B) 12 </label> <label class="block"> <input type="radio" name="soru_2221739" value="c" class="mr-2 answer-option" data-soru-id="2221739" data-dogru="False"> C) 8 </label> <label class="block"> <input type="radio" name="soru_2221739" value="d" class="mr-2 answer-option" data-soru-id="2221739" data-dogru="False"> D) 14 </label> <label class="block"> <input type="radio" name="soru_2221739" value="e" class="mr-2 answer-option" data-soru-id="2221739" data-dogru="False"> E) 6 </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221739">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221739-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221739"> Doğru Cevap: B) 12 </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 10:</h3> <p class="text-gray-700 mb-4">Kullanıcılara veri depolama hizmeti gibi bulut hizmetleri sunulabilen bulut platform modeli aşağıdakilerden hangisidir?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221740" value="a" class="mr-2 answer-option" data-soru-id="2221740" data-dogru="False"> A) SaaS </label> <label class="block"> <input type="radio" name="soru_2221740" value="b" class="mr-2 answer-option" data-soru-id="2221740" data-dogru="False"> B) PaaS </label> <label class="block"> <input type="radio" name="soru_2221740" value="c" class="mr-2 answer-option" data-soru-id="2221740" data-dogru="False"> C) WEB 3.0 </label> <label class="block"> <input type="radio" name="soru_2221740" value="d" class="mr-2 answer-option" data-soru-id="2221740" data-dogru="True"> D) IaaS </label> <label class="block"> <input type="radio" name="soru_2221740" value="e" class="mr-2 answer-option" data-soru-id="2221740" data-dogru="False"> E) Semantik Web </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221740">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221740-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221740"> Doğru Cevap: D) IaaS </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 11:</h3> <p class="text-gray-700 mb-4">Bir web sayfasındaki yazının başlık türü hangi etiketle belirtilir?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221741" value="a" class="mr-2 answer-option" data-soru-id="2221741" data-dogru="True"> A) <h> </label> <label class="block"> <input type="radio" name="soru_2221741" value="b" class="mr-2 answer-option" data-soru-id="2221741" data-dogru="False"> B) <ul> </label> <label class="block"> <input type="radio" name="soru_2221741" value="c" class="mr-2 answer-option" data-soru-id="2221741" data-dogru="False"> C) <p> </label> <label class="block"> <input type="radio" name="soru_2221741" value="d" class="mr-2 answer-option" data-soru-id="2221741" data-dogru="False"> D) <br> </label> <label class="block"> <input type="radio" name="soru_2221741" value="e" class="mr-2 answer-option" data-soru-id="2221741" data-dogru="False"> E) <b> </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221741">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221741-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221741"> Doğru Cevap: A) <h> </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 12:</h3> <p class="text-gray-700 mb-4">Sayfayı genellikle 12 eşit parçaya bölerek tasarım öğelerini sayfa içerisine yerleştirmeyi kolaylaştıran yapı aşağıdakilerden hangisidir?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221742" value="a" class="mr-2 answer-option" data-soru-id="2221742" data-dogru="False"> A) Responsive </label> <label class="block"> <input type="radio" name="soru_2221742" value="b" class="mr-2 answer-option" data-soru-id="2221742" data-dogru="False"> B) Viewport </label> <label class="block"> <input type="radio" name="soru_2221742" value="c" class="mr-2 answer-option" data-soru-id="2221742" data-dogru="False"> C) Width </label> <label class="block"> <input type="radio" name="soru_2221742" value="d" class="mr-2 answer-option" data-soru-id="2221742" data-dogru="True"> D) Grid </label> <label class="block"> <input type="radio" name="soru_2221742" value="e" class="mr-2 answer-option" data-soru-id="2221742" data-dogru="False"> E) Display </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221742">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221742-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221742"> Doğru Cevap: D) Grid </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 13:</h3> <p class="text-gray-700 mb-4">Aşağıdakilerden hangisinde menü oluşturmak için kullanılan anlamsal etiket doğru tanımlanmıştır?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221743" value="a" class="mr-2 answer-option" data-soru-id="2221743" data-dogru="True"> A) nav.anamenu </label> <label class="block"> <input type="radio" name="soru_2221743" value="b" class="mr-2 answer-option" data-soru-id="2221743" data-dogru="False"> B) div.anamenu </label> <label class="block"> <input type="radio" name="soru_2221743" value="c" class="mr-2 answer-option" data-soru-id="2221743" data-dogru="False"> C) float.anamenu </label> <label class="block"> <input type="radio" name="soru_2221743" value="d" class="mr-2 answer-option" data-soru-id="2221743" data-dogru="False"> D) display.anamenu </label> <label class="block"> <input type="radio" name="soru_2221743" value="e" class="mr-2 answer-option" data-soru-id="2221743" data-dogru="False"> E) block.anamenu </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221743">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221743-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221743"> Doğru Cevap: A) nav.anamenu </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 14:</h3> <p class="text-gray-700 mb-4">Paragrafı iki yana yaslı yazmak isteyen bir kodlayıcı aşağıdaki hangi parametreyi kullanmalıdır?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221744" value="a" class="mr-2 answer-option" data-soru-id="2221744" data-dogru="True"> A) <p align=“justify”> </label> <label class="block"> <input type="radio" name="soru_2221744" value="b" class="mr-2 answer-option" data-soru-id="2221744" data-dogru="False"> B) <p background-position=""> </label> <label class="block"> <input type="radio" name="soru_2221744" value="c" class="mr-2 answer-option" data-soru-id="2221744" data-dogru="False"> C) <p font="text-indent"> </label> <label class="block"> <input type="radio" name="soru_2221744" value="d" class="mr-2 answer-option" data-soru-id="2221744" data-dogru="False"> D) <p letter-spacing="s-resize"> </label> <label class="block"> <input type="radio" name="soru_2221744" value="e" class="mr-2 answer-option" data-soru-id="2221744" data-dogru="False"> E) <padding-top> </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221744">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221744-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221744"> Doğru Cevap: A) <p align=“justify”> </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 15:</h3> <p class="text-gray-700 mb-4">HTML kodlamada ifadeler hangi işaretler arasına yazılır?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221745" value="a" class="mr-2 answer-option" data-soru-id="2221745" data-dogru="False"> A) " ve " </label> <label class="block"> <input type="radio" name="soru_2221745" value="b" class="mr-2 answer-option" data-soru-id="2221745" data-dogru="True"> B) < ve > </label> <label class="block"> <input type="radio" name="soru_2221745" value="c" class="mr-2 answer-option" data-soru-id="2221745" data-dogru="False"> C) ; ve ; </label> <label class="block"> <input type="radio" name="soru_2221745" value="d" class="mr-2 answer-option" data-soru-id="2221745" data-dogru="False"> D) ! ve ! </label> <label class="block"> <input type="radio" name="soru_2221745" value="e" class="mr-2 answer-option" data-soru-id="2221745" data-dogru="False"> E) * ve * </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221745">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221745-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221745"> Doğru Cevap: B) < ve > </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 16:</h3> <p class="text-gray-700 mb-4">HTML dil ile birlikte farklı script dillerinin kullanılmasıyla oluşturulan özellikle günümüz web sayfalarında görünen kullanıcı etkileşimli web sayfalarına ne ad verilir?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221746" value="a" class="mr-2 answer-option" data-soru-id="2221746" data-dogru="False"> A) Dosya Transfer Web Sayfaları </label> <label class="block"> <input type="radio" name="soru_2221746" value="b" class="mr-2 answer-option" data-soru-id="2221746" data-dogru="False"> B) Kullanıcı Web Sayfaları </label> <label class="block"> <input type="radio" name="soru_2221746" value="c" class="mr-2 answer-option" data-soru-id="2221746" data-dogru="False"> C) Statik Web Sayfaları </label> <label class="block"> <input type="radio" name="soru_2221746" value="d" class="mr-2 answer-option" data-soru-id="2221746" data-dogru="True"> D) Dinamik Web Sayfaları </label> <label class="block"> <input type="radio" name="soru_2221746" value="e" class="mr-2 answer-option" data-soru-id="2221746" data-dogru="False"> E) E-posta Web Sayfaları </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221746">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221746-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221746"> Doğru Cevap: D) Dinamik Web Sayfaları </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 17:</h3> <p class="text-gray-700 mb-4">HTML'de bir verinin hücre içinde hizalanması için kullanılan işlev aşağıdakilerden hangisidir?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221747" value="a" class="mr-2 answer-option" data-soru-id="2221747" data-dogru="False"> A) border-spacing </label> <label class="block"> <input type="radio" name="soru_2221747" value="b" class="mr-2 answer-option" data-soru-id="2221747" data-dogru="False"> B) text-align </label> <label class="block"> <input type="radio" name="soru_2221747" value="c" class="mr-2 answer-option" data-soru-id="2221747" data-dogru="True"> C) padding </label> <label class="block"> <input type="radio" name="soru_2221747" value="d" class="mr-2 answer-option" data-soru-id="2221747" data-dogru="False"> D) border </label> <label class="block"> <input type="radio" name="soru_2221747" value="e" class="mr-2 answer-option" data-soru-id="2221747" data-dogru="False"> E) width </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221747">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221747-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221747"> Doğru Cevap: C) padding </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 18:</h3> <p class="text-gray-700 mb-4">Bir form içerisinde 5 farklı onay kutusu eklenmek isteniyor. Varsayılan olarak ise ilk seçeneğin işaretli olması gerekiyor. Buna göre ilk seçenek için yazılması gereken form özelliği aşağıdakilerden hangisi olmalıdır?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221748" value="a" class="mr-2 answer-option" data-soru-id="2221748" data-dogru="False"> A) checkbox </label> <label class="block"> <input type="radio" name="soru_2221748" value="b" class="mr-2 answer-option" data-soru-id="2221748" data-dogru="False"> B) check </label> <label class="block"> <input type="radio" name="soru_2221748" value="c" class="mr-2 answer-option" data-soru-id="2221748" data-dogru="True"> C) checked </label> <label class="block"> <input type="radio" name="soru_2221748" value="d" class="mr-2 answer-option" data-soru-id="2221748" data-dogru="False"> D) radio </label> <label class="block"> <input type="radio" name="soru_2221748" value="e" class="mr-2 answer-option" data-soru-id="2221748" data-dogru="False"> E) submit </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221748">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221748-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221748"> Doğru Cevap: C) checked </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 19:</h3> <p class="text-gray-700 mb-4">I - Radyo dalgalarını kullanarak veri iletimi------ A) ALOHANET II - Uyduların kullanıldığı ------------------------- B) SATNET III - Ticari paket anahtarlama ağı --------------- C) TELENET IV - Fransız paket anahtarlama ağı -------------- D) CYCLADES Aşağıdakilerden hangisi/hangileri, yukarıda doğru eşleştirmeleri yapılan farklı veri iletim teknolojileri ile ilk ağ/ağlardır?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221749" value="a" class="mr-2 answer-option" data-soru-id="2221749" data-dogru="False"> A) II-B; III-C </label> <label class="block"> <input type="radio" name="soru_2221749" value="b" class="mr-2 answer-option" data-soru-id="2221749" data-dogru="False"> B) I-A; III-C; IV-D </label> <label class="block"> <input type="radio" name="soru_2221749" value="c" class="mr-2 answer-option" data-soru-id="2221749" data-dogru="False"> C) II-B; III-C; IV-D </label> <label class="block"> <input type="radio" name="soru_2221749" value="d" class="mr-2 answer-option" data-soru-id="2221749" data-dogru="False"> D) I-A; II-B; III-C </label> <label class="block"> <input type="radio" name="soru_2221749" value="e" class="mr-2 answer-option" data-soru-id="2221749" data-dogru="True"> E) I-A; II-B; III-C; IV-D </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221749">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221749-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221749"> Doğru Cevap: E) I-A; II-B; III-C; IV-D </p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-800 mb-3">Soru 20:</h3> <p class="text-gray-700 mb-4">Aldığı değere göre, sayfa içerisindeki elemanların,sayfa içeriğine veya ölçülerine göre yer değiştirmesine olanak sağlayan bölüm özelliği aşağıdakilerden hangisidir?</p> <div class="space-y-2"> <label class="block"> <input type="radio" name="soru_2221750" value="a" class="mr-2 answer-option" data-soru-id="2221750" data-dogru="False"> A) Position </label> <label class="block"> <input type="radio" name="soru_2221750" value="b" class="mr-2 answer-option" data-soru-id="2221750" data-dogru="False"> B) Margin </label> <label class="block"> <input type="radio" name="soru_2221750" value="c" class="mr-2 answer-option" data-soru-id="2221750" data-dogru="False"> C) Width </label> <label class="block"> <input type="radio" name="soru_2221750" value="d" class="mr-2 answer-option" data-soru-id="2221750" data-dogru="False"> D) Length </label> <label class="block"> <input type="radio" name="soru_2221750" value="e" class="mr-2 answer-option" data-soru-id="2221750" data-dogru="True"> E) Float </label> </div> <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2221750">Doğru Cevap!</p> <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2221750-wrong">Yanlış Cevap!</p> <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2221750"> Doğru Cevap: E) Float </p> </div> </div> <div class="mt-6"> <button type="submit" class="bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700">Sınavı Bitir ve Puan Al</button> </div> </form> </main>  <aside class="w-72 p-6 bg-white border-l border-gray-300 overflow-auto hidden lg:block flex-shrink-0"> <h3 class="font-bold mb-4 text-gray-700">Çalışırken Dinleyebileceğiniz Müzikler</h3> <p class="text-sm text-gray-600 mb-4"> Sınavahazirlan.com olarak çalışırken keyif alabileceğiniz şarkı ve playlist önerilerimizi sizinle paylaşıyoruz! </p> <div class="space-y-4"> <div class="flex items-center bg-gray-100 p-4 rounded-lg shadow-sm"> <img src="https://image-cdn-ak.spotifycdn.com/image/ab67706c0000d72cf2480e1de4c7ede1afa226cf" alt="Rahatlatıcı Elektronik Müzikler Playlisti" class="w-16 h-16 rounded-full mr-4"> <div> <p class="font-semibold text-gray-700">Rahatlatıcı Elektronik Müzikler Playlisti</p> <a href="https://open.spotify.com/playlist/3TaLke7eX37xNlaemtvEQW?si=2gox5u4-RG2POgkoPQk1Ww" target="_blank" class="text-blue-600 text-sm underline">Spotify'da Dinle</a> </div> </div> <div class="flex items-center bg-gray-100 p-4 rounded-lg shadow-sm"> <img src="https://image-cdn-ak.spotifycdn.com/image/ab67706c0000d72ccba9477216b8ec87eed975de" alt="Kafamda Bi' Sürü Şey 🎶🌌 | Üçüncü Yeniler Playlist" class="w-16 h-16 rounded-full mr-4"> <div> <p class="font-semibold text-gray-700">Kafamda Bi' Sürü Şey 🎶🌌 | Üçüncü Yeniler Playlist</p> <a href="https://open.spotify.com/playlist/23bpQsp14cT4AiUFoK9GcQ?si=dZh6V4e6Tlyda6m7h8XzTw" target="_blank" class="text-blue-600 text-sm underline">Spotify'da Dinle</a> </div> </div> <div class="flex items-center bg-gray-100 p-4 rounded-lg shadow-sm"> <img src="https://image-cdn-ak.spotifycdn.com/image/ab67706c0000da845783f0a721a7f32c7c0f9eb7" alt="Benekli Elbise" class="w-16 h-16 rounded-full mr-4"> <div> <p class="font-semibold text-gray-700">Benekli Elbise</p> <a href="https://open.spotify.com/playlist/5rR2Puxm8bXqRG3rhnCpiy?si=ce7853185b804021&nd=1&dlsi=b6cd9541e9264e3f" target="_blank" class="text-blue-600 text-sm underline">Spotify'da Dinle</a> </div> </div> <div class="flex items-center bg-gray-100 p-4 rounded-lg shadow-sm"> <img src="https://image-cdn-ak.spotifycdn.com/image/ab67706c0000d72c8a20a994331964fe3b225a9c" alt="Şimdi Sınavlara Çalışıyorum Sonra Senin İçin Çalışacağım" class="w-16 h-16 rounded-full mr-4"> <div> <p class="font-semibold text-gray-700">Şimdi Sınavlara Çalışıyorum Sonra Senin İçin Çalışacağım</p> <a href="https://open.spotify.com/playlist/61TZd9nbCSit0X54rnuJZY" target="_blank" class="text-blue-600 text-sm underline">Spotify'da Dinle</a> </div> </div> <div class="flex items-center bg-gray-100 p-4 rounded-lg shadow-sm"> <img src="https://image-cdn-ak.spotifycdn.com/image/ab67706c0000d72cf3cec54e22a6b7e0276289ba" alt="Yalnızlık Paylaşılmaz" class="w-16 h-16 rounded-full mr-4"> <div> <p class="font-semibold text-gray-700">Yalnızlık Paylaşılmaz</p> <a href="https://open.spotify.com/playlist/16IHRYHkWJ1cWC4E5hH0R8" target="_blank" class="text-blue-600 text-sm underline">Spotify'da Dinle</a> </div> </div> </div> </aside> </div>  <script> document.addEventListener('DOMContentLoaded', function() { const answerOptions = document.querySelectorAll('.answer-option'); const answerDisplayOptions = document.getElementsByName('answer_display'); // Function to check if "Cevapları Anında Göster" is selected function isImmediate() { for (const option of answerDisplayOptions) { if (option.checked && option.value === 'immediate') { return true; } } return false; } answerOptions.forEach(option => { option.addEventListener('change', function() { if (isImmediate()) { const soruId = this.dataset.soruId; const isDogru = this.dataset.dogru === 'True'; const feedbackCorrect = document.getElementById(`feedback-${soruId}`); const feedbackWrong = document.getElementById(`feedback-${soruId}-wrong`); const correctAnswer = document.getElementById(`correct-answer-${soruId}`); if (isDogru) { feedbackCorrect.classList.remove('hidden'); feedbackWrong.classList.add('hidden'); correctAnswer.classList.add('hidden'); // Hide correct answer if correct this.parentElement.classList.add('text-green-600'); } else { feedbackWrong.classList.remove('hidden'); feedbackCorrect.classList.add('hidden'); if (correctAnswer) { correctAnswer.classList.remove('hidden'); } this.parentElement.classList.add('text-red-600'); } // Disable further changes const allOptions = document.querySelectorAll(`input[name="soru_${soruId}"]`); allOptions.forEach(opt => opt.disabled = true); } }); }); // Optional: Handle form submission differently based on answer display option const sinavForm = document.getElementById('sinavForm'); sinavForm.addEventListener('submit', function(e) { // You can add confirmation or other logic here if needed }); }); function toggleSidebar() { const sidebar = document.getElementById('sidebar'); const overlay = document.getElementById('overlay'); if (sidebar.classList.contains('hidden')) { sidebar.classList.remove('hidden'); sidebar.classList.add('fixed', 'z-50', 'top-0', 'left-0', 'h-full'); overlay.classList.remove('hidden'); } else { sidebar.classList.add('hidden'); sidebar.classList.remove('fixed', 'z-50', 'top-0', 'left-0', 'h-full'); overlay.classList.add('hidden'); } } </script>  </body> </html>