Web Tabanlı Kodlama

Soru 1

Orta Zorluk

Aşağıdakilerden hangisi ya da hangileri bulut bilişim teknolojisinin temel hizmet modellerindendir?

A) IaaS

B) PaaS

C) SaaS

D) Iass ve SaaS

E) IaaS, PaaS ve SaaS

Soru 2

Orta Zorluk

Form özelliklerinden biri olan accept-charset ne amaçla kullanılır?

A) Form verilerinin sunucuda nereye gönderileceğini belirtir.

B) Form verilerinin gönderilmesinde hangi HTTP yönteminin kullanılacağını belirtir.

C) Form verileri sunucuya gönderilirken nasıl kodlanacağını belirtir. Sadece method=”post” ile kullanılabilir.

D) Forma bir isim verilmesini sağlar.

E) Form verilerinin hangi karakter kodlamasını kabul edeceğini belirtir.

Soru 3

Orta Zorluk

Form elemanlarını , verileri servera göndermeden, sayfa yüklendiğindeki değerlerine döndürmek için hangi input tipi (type) kullanılmalıdır?

A) text

B) password

C) submit

D) hidden

E) reset

Soru 4

Orta Zorluk

Form verilerinin sunucuda nereye gönderileceğini belirten form özelliği aşağıdakilerden hangisidir?

A) action

B) method

C) name

D) target

E) accept

Soru 5

Orta Zorluk

@media (max-width: 700px){ #reklam { display : none; } } Yukarıdaki ortam sorgunun yaptığı işlem aşağıdakilerden hangisinde doğru olarak tanımlanmıştır.

A) Bilgisayar ekranlarının çözünürlük genişliği eğer en fazla 700px ise reklam id’li eleman sayfadan kaldırılmaktadır.

B) Tüm ortamlarda eğer ortamın genişliği en fazla 700px ise sadece reklam id’li elemanı sayfada göstermektedir.

C) Tüm ortamlarda eğer ortamın genişliği en fazla 700px ise reklam id’li eleman sayfadan kaldırılmaktadır.

D) Mobil cihazların ekran çözünürlük genişliği eğer en fazla 700px ise reklam id’li eleman sayfadan kaldırılmaktadır.

E) Mobil cihazların ekran çözünürlük genişliği eğer en fazla 700px ise sadece reklam id’li eleman sayfadan göstermektir.

Soru 6

Orta Zorluk

HTML dilini ile bölümler oluşturulduktan sonra, web sayfasının görüntüsünün estetik olarak daha iyi olması için CSS ile oluşturulan bölümlerin biçimlendirilmesi gerekmektedir. Bölümlerin biçimlendirilmesine yönelik olarak aşağıdakilerden hangisi kullanılır?

A) Float

B) Header

C) Footer

D) Section

E) Article

Soru 7

Orta Zorluk

Bootstrap öncelikle hangi tür cihazları hedef alarak geliştirilmiştir?

A) Masaüstü bilgisayar

B) Mobil cihazlar

C) Dizüstü bilgisayar

D) Smart TV

E) Giyilebilir cihazlar

Soru 8

Orta Zorluk

şeklindeki form tasarımında girilmesi istenen veri aşağıdakilerden hangisidir?

A) 04.10.2019

B) destek@anadolu.edu.tr

C) www.anadolu.edu.tr

D) 5XX-1234567

E) Dosya Yükle

Soru 9

Orta Zorluk

Aşağıdaki ağ uygulamalarından hangisi diğerlerine göre daha geç ortaya çıkmıştır?

A) NSFNET

B) ALOHANET

C) TELENET

D) CYCLADES

E) SATNET

Soru 10

Orta Zorluk

Web sayfasındaki bir belgenin ya da uygulamanın ana içeriğini temsil eden etiket aşağıdakilerden hangisidir?

A) Aside

B) Main

C) Section

D) Header

E) Nav

Soru 11

Orta Zorluk

Aşağıdakilerden hangisi bulut bilişim teknolojilerinin avantajlarından birisidir?

A) Güvenlik

B) Gizlilik

C) Sistem performansı

D) Yasal sınırlamalar

E) Maliyet

Soru 12

Orta Zorluk

Bir div etiketinin Max-Width değeri 500 px (Max-Width: 500px;) olduğunda aşağıdakilerden hangi gerçekleşmektedir?

A) Elemanın genişliği için en büyük değeri gösterir.

B) Elemanın genişliği için en alt değerini gösterir.

C) Elemanın yüksekliğinin için en alt değerini gösterir.

D) Elemanın yüksekliğinin için en büyük değeri gösterir.

E) Elemanın genişliğinin ve yüksekliğinin için en büyük değeri gösterir.

Soru 13

Orta Zorluk

Madde işaretlerinin yöneteceği kayan resim elementini belirtmek için hangi özellik kullanılır?

A) data-target

B) target-blank

C) data-set

D) data-li

E) ol-li

Soru 14

Orta Zorluk

I. Header II. Article III. Span Yukarıdaki seçeneklerden hagisi veya hangileri HTML5 sürümü ile birlikte gelen ve div etiketi yerine bölüm oluşturmak için kullanılabilen anlamsal etiketlerdendir?

A) Yalnız II

B) Yalnız III

C) I ve II

D) II ve III

E) I, II ve III

Soru 15

Orta Zorluk

Bir formda kullanıcıların form alanlarını doldururken yanlış veriler girmeleri gibi durumlarda form elemanlarını sayfa yüklendiğindeki değerlerine döndürecek bir düğme olması istenmektedir. Buna göre aşağıdaki elemanlardan hangisinin kullanılması uygundur?

A) Checkbox

B) Radio

C) Submit

D) Reset

E) Hidden

Soru 16

Orta Zorluk

Aşağıdaki form tasarımı komutlarından hangisi doğru kullanılmıştır?

A)

B)

C)

D)

E)

</span>
                    </div>
                  </label>
                
              </div>
              
              <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2222001">
                <div class="flex items-center">
                  <i class="fas fa-check-circle text-green-500 mr-2"></i>
                  <span class="font-medium text-green-700">Doğru Cevap!</span>
                </div>
              </div>
              
              <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2222001-wrong">
                <div class="flex items-center">
                  <i class="fas fa-times-circle text-red-500 mr-2"></i>
                  <span class="font-medium text-red-700">Yanlış Cevap!</span>
                </div>
                <div class="mt-2 text-sm text-blue-700" id="correct-answer-2222001">
                  <span class="font-medium">Doğru Cevap:</span> 
                  
                    B) <datalist></datalist>
                  
                </div>
              </div>

<div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2222001">
                  <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i>
                    <div>
                      <span class="font-medium text-blue-700">Açıklama:</span>
                      <p class="text-blue-600 mt-1">Yanıt Açıklaması: Verilen kodlardan sadece datalist koutu doğru ifade edilmiştir. Diğer komutlardaki eylemler ve değerle hatalıdır. Input için kapama işlemi yapılmaz.</p>
                    </div>
                  </div>
                </div>
              
            </div>
          
            <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">Soru 17</h3>
                <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span>
              </div>
            
              
              <div class="prose max-w-none mb-6">
                <p class="text-gray-700">Aşağıdakilerden hangisi, Html işaretleme dilinde kategorik listeyi ifade eder?</p>
              </div>
              
              <div class="space-y-3">
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222002" data-option="a">
                  <input type="radio" 
                         name="soru_2222002" 
                         value="a" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222002" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">A)</span>
                    <span class="text-gray-700"><ul></span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222002" data-option="b">
                  <input type="radio" 
                         name="soru_2222002" 
                         value="b" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222002" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">B)</span>
                    <span class="text-gray-700"><ol></span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222002" data-option="c">
                  <input type="radio" 
                         name="soru_2222002" 
                         value="c" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222002" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">C)</span>
                    <span class="text-gray-700"><p></span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222002" data-option="d">
                  <input type="radio" 
                         name="soru_2222002" 
                         value="d" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222002" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">D)</span>
                    <span class="text-gray-700"><br></span>
                  </div>
                </label>
                
                
                  <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222002" data-option="e">
                    <input type="radio" 
                           name="soru_2222002" 
                           value="e" 
                           class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                           data-soru-id="2222002" 
                           data-dogru="True">
                    <div>
                      <span class="font-medium text-gray-800">E)</span>
                      <span class="text-gray-700"><dl></span>
                    </div>
                  </label>
                
              </div>
              
              <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2222002">
                <div class="flex items-center">
                  <i class="fas fa-check-circle text-green-500 mr-2"></i>
                  <span class="font-medium text-green-700">Doğru Cevap!</span>
                </div>
              </div>
              
              <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2222002-wrong">
                <div class="flex items-center">
                  <i class="fas fa-times-circle text-red-500 mr-2"></i>
                  <span class="font-medium text-red-700">Yanlış Cevap!</span>
                </div>
                <div class="mt-2 text-sm text-blue-700" id="correct-answer-2222002">
                  <span class="font-medium">Doğru Cevap:</span> 
                  
                    E) <dl>
                  
                </div>
              </div>

<div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2222002">
                  <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i>
                    <div>
                      <span class="font-medium text-blue-700">Açıklama:</span>
                      <p class="text-blue-600 mt-1">Yanıt Açıklaması:</p>
                    </div>
                  </div>
                </div>
              
            </div>
          
            <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">Soru 18</h3>
                <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span>
              </div>
            
              
              <div class="prose max-w-none mb-6">
                <p class="text-gray-700">Aşağıdakilerden hangi etiket “Metnin arkasını boyayarak vurgular”?</p>
              </div>
              
              <div class="space-y-3">
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222003" data-option="a">
                  <input type="radio" 
                         name="soru_2222003" 
                         value="a" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222003" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">A)</span>
                    <span class="text-gray-700">del</span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222003" data-option="b">
                  <input type="radio" 
                         name="soru_2222003" 
                         value="b" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222003" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">B)</span>
                    <span class="text-gray-700">ins</span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222003" data-option="c">
                  <input type="radio" 
                         name="soru_2222003" 
                         value="c" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222003" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">C)</span>
                    <span class="text-gray-700">small</span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222003" data-option="d">
                  <input type="radio" 
                         name="soru_2222003" 
                         value="d" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222003" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">D)</span>
                    <span class="text-gray-700">strong</span>
                  </div>
                </label>
                
                
                  <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222003" data-option="e">
                    <input type="radio" 
                           name="soru_2222003" 
                           value="e" 
                           class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                           data-soru-id="2222003" 
                           data-dogru="True">
                    <div>
                      <span class="font-medium text-gray-800">E)</span>
                      <span class="text-gray-700">mark</span>
                    </div>
                  </label>
                
              </div>
              
              <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2222003">
                <div class="flex items-center">
                  <i class="fas fa-check-circle text-green-500 mr-2"></i>
                  <span class="font-medium text-green-700">Doğru Cevap!</span>
                </div>
              </div>
              
              <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2222003-wrong">
                <div class="flex items-center">
                  <i class="fas fa-times-circle text-red-500 mr-2"></i>
                  <span class="font-medium text-red-700">Yanlış Cevap!</span>
                </div>
                <div class="mt-2 text-sm text-blue-700" id="correct-answer-2222003">
                  <span class="font-medium">Doğru Cevap:</span> 
                  
                    E) mark
                  
                </div>
              </div>

<div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2222003">
                  <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i>
                    <div>
                      <span class="font-medium text-blue-700">Açıklama:</span>
                      <p class="text-blue-600 mt-1">Yanıt Açıklaması: Mark: Metnin arkasını boyayarak vurgular. <mark>metin</mark></p>
                    </div>
                  </div>
                </div>
              
            </div>
          
            <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">Soru 19</h3>
                <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span>
              </div>
            
              
              <div class="prose max-w-none mb-6">
                <p class="text-gray-700">Formlar hangi HTML etiketiyle tanımlanır?</p>
              </div>
              
              <div class="space-y-3">
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222004" data-option="a">
                  <input type="radio" 
                         name="soru_2222004" 
                         value="a" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222004" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">A)</span>
                    <span class="text-gray-700">body</span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222004" data-option="b">
                  <input type="radio" 
                         name="soru_2222004" 
                         value="b" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222004" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">B)</span>
                    <span class="text-gray-700">head</span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222004" data-option="c">
                  <input type="radio" 
                         name="soru_2222004" 
                         value="c" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222004" 
                         data-dogru="True">
                  <div>
                    <span class="font-medium text-gray-800">C)</span>
                    <span class="text-gray-700">form</span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222004" data-option="d">
                  <input type="radio" 
                         name="soru_2222004" 
                         value="d" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222004" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">D)</span>
                    <span class="text-gray-700">table</span>
                  </div>
                </label>
                
                
                  <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222004" data-option="e">
                    <input type="radio" 
                           name="soru_2222004" 
                           value="e" 
                           class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                           data-soru-id="2222004" 
                           data-dogru="False">
                    <div>
                      <span class="font-medium text-gray-800">E)</span>
                      <span class="text-gray-700">div</span>
                    </div>
                  </label>
                
              </div>
              
              <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2222004">
                <div class="flex items-center">
                  <i class="fas fa-check-circle text-green-500 mr-2"></i>
                  <span class="font-medium text-green-700">Doğru Cevap!</span>
                </div>
              </div>
              
              <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2222004-wrong">
                <div class="flex items-center">
                  <i class="fas fa-times-circle text-red-500 mr-2"></i>
                  <span class="font-medium text-red-700">Yanlış Cevap!</span>
                </div>
                <div class="mt-2 text-sm text-blue-700" id="correct-answer-2222004">
                  <span class="font-medium">Doğru Cevap:</span> 
                  
                    C) form
                  
                </div>
              </div>

<div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2222004">
                  <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i>
                    <div>
                      <span class="font-medium text-blue-700">Açıklama:</span>
                      <p class="text-blue-600 mt-1">Yanıt Açıklaması: Formlar form etiketiyle başlayıp klasik HTML kodlarında olduğu gibi /form komutuyla sonlandırılır.</p>
                    </div>
                  </div>
                </div>
              
            </div>
          
            <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">Soru 20</h3>
                <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span>
              </div>
            
              
              <div class="prose max-w-none mb-6">
                <p class="text-gray-700">Aşağıdakilerden hangisinde ontoloji geliştirmek için kullanılan ontoloji dilleri doğru olarak verilmiştir?</p>
              </div>
              
              <div class="space-y-3">
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222005" data-option="a">
                  <input type="radio" 
                         name="soru_2222005" 
                         value="a" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222005" 
                         data-dogru="True">
                  <div>
                    <span class="font-medium text-gray-800">A)</span>
                    <span class="text-gray-700">OWL-RDF</span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222005" data-option="b">
                  <input type="radio" 
                         name="soru_2222005" 
                         value="b" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222005" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">B)</span>
                    <span class="text-gray-700">OWL-HTML</span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222005" data-option="c">
                  <input type="radio" 
                         name="soru_2222005" 
                         value="c" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222005" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">C)</span>
                    <span class="text-gray-700">RDF-XML</span>
                  </div>
                </label>
                
                <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222005" data-option="d">
                  <input type="radio" 
                         name="soru_2222005" 
                         value="d" 
                         class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                         data-soru-id="2222005" 
                         data-dogru="False">
                  <div>
                    <span class="font-medium text-gray-800">D)</span>
                    <span class="text-gray-700">PaaS-SaaS</span>
                  </div>
                </label>
                
                
                  <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2222005" data-option="e">
                    <input type="radio" 
                           name="soru_2222005" 
                           value="e" 
                           class="form-radio text-primary-600 mt-1 mr-3 answer-option" 
                           data-soru-id="2222005" 
                           data-dogru="False">
                    <div>
                      <span class="font-medium text-gray-800">E)</span>
                      <span class="text-gray-700">HTML-XML</span>
                    </div>
                  </label>
                
              </div>
              
              <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2222005">
                <div class="flex items-center">
                  <i class="fas fa-check-circle text-green-500 mr-2"></i>
                  <span class="font-medium text-green-700">Doğru Cevap!</span>
                </div>
              </div>
              
              <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2222005-wrong">
                <div class="flex items-center">
                  <i class="fas fa-times-circle text-red-500 mr-2"></i>
                  <span class="font-medium text-red-700">Yanlış Cevap!</span>
                </div>
                <div class="mt-2 text-sm text-blue-700" id="correct-answer-2222005">
                  <span class="font-medium">Doğru Cevap:</span> 
                  
                    A) OWL-RDF
                  
                </div>
              </div>

<div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2222005">
                  <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i>
                    <div>
                      <span class="font-medium text-blue-700">Açıklama:</span>
                      <p class="text-blue-600 mt-1">Yanıt Açıklaması: Ontolojiler, kısaca OWL (Web Ontoloji Dili - Web Ontology Language) ve RDF (Kaynak Tanımlama Çerçevesi - Resource Description Framework) adı verilen ontoloji geliştirme dilleri yardımı ile oluşturulmaktadır. Doğru cevap A'dır.</p>
                    </div>
                  </div>
                </div>
              
            </div>
          
        </div>
        
        <div class="mt-6 flex justify-between items-center">
          
            <a href="/kategori/acikogretim-fakultesi/ackogretim-fakultesi-onlisans-programlar-2-yllk/web-tasarm-ve-kodlama/web-tasarm-ve-kodlama-wtk207u-web-tabanl-kodlama/" class="text-gray-600 hover:text-gray-800">
              <i class="fas fa-arrow-left mr-1"></i> Derse Dön
            </a>
          
          <button type="submit" class="bg-primary-600 text-white rounded-lg px-6 py-3 hover:bg-primary-700 transition shadow-sm">
            <i class="fas fa-check-circle mr-2"></i> Sınavı Bitir ve Puan Al
          </button>
        </div>
      </form>
    </main>
  </div>

<footer class="bg-gray-900 text-white pt-12 pb-6 mt-12">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
      <div>
        <div class="flex items-center space-x-2 mb-4">
          <div class="bg-white text-primary-600 p-2 rounded-lg">
            <img src="/static/img/icon.svg" alt="sinavahazirlan.com Logo" class="h-6 w-6">
          </div>
          <span class="text-xl font-bold text-white">sinavahazirlan.com</span>
        </div>
        <p class="text-gray-400 mb-4">Eğitimde başarının adresi. Kişiselleştirilmiş öğrenme deneyimi ile hedeflerinize ulaşın.</p>
        <div class="flex space-x-4 text-gray-400">
          <a href="#" class="hover:text-white transition"><i class="fa-brands fa-facebook-f"></i></a>
          <a href="#" class="hover:text-white transition"><i class="fa-brands fa-twitter"></i></a>
          <a href="#" class="hover:text-white transition"><i class="fa-brands fa-instagram"></i></a>
          <a href="#" class="hover:text-white transition"><i class="fa-brands fa-youtube"></i></a>
        </div>
      </div>

<div>
        <h3 class="text-lg font-semibold mb-4">Hızlı Bağlantılar</h3>
        <ul class="space-y-2 text-gray-400">
          <li><a href="/" class="hover:text-white transition">Ana Sayfa</a></li>
          <li><a href="/hazirlaniyor/" class="hover:text-white transition">Dersler</a></li>
          <li><a href="/calisma-araclari/" class="hover:text-white transition">Çalışma Araçları</a></li>
          <li><a href="/blog/" class="hover:text-white transition">Blog</a></li>
          <li><a href="/hakkimizda/" class="hover:text-white transition">Hakkımızda</a></li>
        </ul>
      </div>

<div>
        <h3 class="text-lg font-semibold mb-4">Sınavlar</h3>
        <ul class="space-y-2 text-gray-400">
          <li><a href="/yks/" class="hover:text-white transition">YKS (TYT, AYT)</a></li>
          <li><a href="/lgs/" class="hover:text-white transition">LGS</a></li>
          <li><a href="/kpss/" class="hover:text-white transition">KPSS</a></li>
          <li><a href="/dgs/" class="hover:text-white transition">DGS</a></li>
          <li><a href="/ales/" class="hover:text-white transition">ALES</a></li>
          <li><a href="/yokdil/" class="hover:text-white transition">YÖKDİL</a></li>
        </ul>
      </div>
    </div>

<div class="border-t border-gray-800 pt-6 flex justify-center">
      <p class="text-gray-500 text-sm text-center">© 2025 sinavahazirlan.com. Tüm hakları saklıdır.</p>
    </div>
  </div>
</footer>

<script>
    document.addEventListener('DOMContentLoaded', () => {
      // Kenar Çubuğu Geçişi
      const sidebar = document.getElementById('sidebar');
      const sidebarToggle = document.getElementById('sidebarToggle');
      const sidebarClose = document.getElementById('sidebarClose');
      const sidebarOverlay = document.getElementById('sidebarOverlay');

// Kenar çubuğu açma fonksiyonu
      const openSidebar = () => {
        sidebar.classList.add('sidebar-open');
        sidebarOverlay.classList.add('active');
        document.body.classList.add('overflow-hidden');
      };

// Kenar çubuğu kapatma fonksiyonu
      const closeSidebar = () => {
        sidebar.classList.remove('sidebar-open');
        sidebarOverlay.classList.remove('active');
        document.body.classList.remove('overflow-hidden');
      };

sidebarToggle?.addEventListener('click', openSidebar);
      sidebarClose?.addEventListener('click', closeSidebar);
      sidebarOverlay?.addEventListener('click', closeSidebar);

// Sınav İşlemleri
      const answerOptions = document.querySelectorAll('.answer-option');
      const answerDisplayOptions = document.getElementsByName('answer_display');
      const optionLabels = document.querySelectorAll('.option-label');

// 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 explanation = document.getElementById(`explanation-${soruId}`);
            const selectedLabel = document.querySelector(`.option-label[data-soru-id="${soruId}"][data-option="${this.value}"]`);
            
            // Tüm seçenekleri devre dışı bırak
            const allOptions = document.querySelectorAll(`input[name="soru_${soruId}"]`);
            allOptions.forEach(opt => opt.disabled = true);
            
            // Doğru/yanlış geri bildirimini göster
            if (isDogru) {
              feedbackCorrect.classList.remove('hidden');
              feedbackWrong.classList.add('hidden');
              selectedLabel.classList.add('option-correct');
            } else {
              feedbackWrong.classList.remove('hidden');
              feedbackCorrect.classList.add('hidden');
              selectedLabel.classList.add('option-incorrect');
              
              // Doğru cevabı işaretle
              const correctOption = document.querySelector(`input[name="soru_${soruId}"][data-dogru="True"]`);
              if (correctOption) {
                const correctLabel = document.querySelector(`.option-label[data-soru-id="${soruId}"][data-option="${correctOption.value}"]`);
                correctLabel.classList.add('option-correct');
              }
            }

// Açıklamayı göster (varsa)
            if (explanation) {
              explanation.classList.remove('hidden');
            }
          }
        });
      });

// Form gönderimi
      const sinavForm = document.getElementById('sinavForm');
      sinavForm.addEventListener('submit', function(e) {
        // Burada form gönderimi öncesi işlemler yapılabilir
        // Örneğin, kullanıcıya bir onay mesajı gösterilebilir
        
        // Eğer "Cevapları Sınav Sonunda Göster" seçiliyse ve kullanıcı formu göndermek istiyorsa
        if (!isImmediate()) {
          // Burada tüm cevapları kontrol edip sonuçları gösterebilirsiniz
          // Veya sunucuya gönderip sonuçları alabilirsiniz
        }
      });
    });
  </script>
</body>
</html>

Sınav Ayarları

Soru 1

Soru 2

Soru 3

Soru 4

Soru 5

Soru 6

Soru 7

Soru 8

Soru 9

Soru 10

Soru 11

Soru 12

Soru 13

Soru 14

Soru 15

Soru 16