Final Sınavı - Web Tabanlı Kodlama

Soru 1:

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:

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:

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:

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:

@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:

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:

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:

ş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:

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:

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:

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:

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:

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:

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:

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:

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

A) B) C) D) E)

</label>
                
              </div>
              <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2222001">Doğru Cevap!</p>
              <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2222001-wrong">Yanlış Cevap!</p>
              <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2222001">
                Doğru Cevap: 
                
                  B) <datalist></datalist>
                
              </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">Aşağıdakilerden hangisi, Html işaretleme dilinde kategorik listeyi ifade eder?</p>
              <div class="space-y-2">
                <label class="block">
                  <input type="radio" 
                         name="soru_2222002" 
                         value="a" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222002" 
                         data-dogru="False">
                  A) <ul>
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222002" 
                         value="b" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222002" 
                         data-dogru="False">
                  B) <ol>
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222002" 
                         value="c" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222002" 
                         data-dogru="False">
                  C) <p>
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222002" 
                         value="d" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222002" 
                         data-dogru="False">
                  D) <br>
                </label>
                
                  <label class="block">
                    <input type="radio" 
                           name="soru_2222002" 
                           value="e" 
                           class="mr-2 answer-option" 
                           data-soru-id="2222002" 
                           data-dogru="True">
                    E) <dl>
                  </label>
                
              </div>
              <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2222002">Doğru Cevap!</p>
              <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2222002-wrong">Yanlış Cevap!</p>
              <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2222002">
                Doğru Cevap: 
                
                  E) <dl>
                
              </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">Aşağıdakilerden hangi etiket “Metnin arkasını boyayarak vurgular”?</p>
              <div class="space-y-2">
                <label class="block">
                  <input type="radio" 
                         name="soru_2222003" 
                         value="a" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222003" 
                         data-dogru="False">
                  A) del
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222003" 
                         value="b" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222003" 
                         data-dogru="False">
                  B) ins
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222003" 
                         value="c" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222003" 
                         data-dogru="False">
                  C) small
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222003" 
                         value="d" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222003" 
                         data-dogru="False">
                  D) strong
                </label>
                
                  <label class="block">
                    <input type="radio" 
                           name="soru_2222003" 
                           value="e" 
                           class="mr-2 answer-option" 
                           data-soru-id="2222003" 
                           data-dogru="True">
                    E) mark
                  </label>
                
              </div>
              <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2222003">Doğru Cevap!</p>
              <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2222003-wrong">Yanlış Cevap!</p>
              <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2222003">
                Doğru Cevap: 
                
                  E) mark
                
              </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">Formlar hangi HTML etiketiyle tanımlanır?</p>
              <div class="space-y-2">
                <label class="block">
                  <input type="radio" 
                         name="soru_2222004" 
                         value="a" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222004" 
                         data-dogru="False">
                  A) body
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222004" 
                         value="b" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222004" 
                         data-dogru="False">
                  B) head
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222004" 
                         value="c" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222004" 
                         data-dogru="True">
                  C) form
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222004" 
                         value="d" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222004" 
                         data-dogru="False">
                  D) table
                </label>
                
                  <label class="block">
                    <input type="radio" 
                           name="soru_2222004" 
                           value="e" 
                           class="mr-2 answer-option" 
                           data-soru-id="2222004" 
                           data-dogru="False">
                    E) div
                  </label>
                
              </div>
              <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2222004">Doğru Cevap!</p>
              <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2222004-wrong">Yanlış Cevap!</p>
              <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2222004">
                Doğru Cevap: 
                
                  C) form
                
              </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">Aşağıdakilerden hangisinde ontoloji geliştirmek için kullanılan ontoloji dilleri doğru olarak verilmiştir?</p>
              <div class="space-y-2">
                <label class="block">
                  <input type="radio" 
                         name="soru_2222005" 
                         value="a" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222005" 
                         data-dogru="True">
                  A) OWL-RDF
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222005" 
                         value="b" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222005" 
                         data-dogru="False">
                  B) OWL-HTML
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222005" 
                         value="c" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222005" 
                         data-dogru="False">
                  C) RDF-XML
                </label>
                <label class="block">
                  <input type="radio" 
                         name="soru_2222005" 
                         value="d" 
                         class="mr-2 answer-option" 
                         data-soru-id="2222005" 
                         data-dogru="False">
                  D) PaaS-SaaS
                </label>
                
                  <label class="block">
                    <input type="radio" 
                           name="soru_2222005" 
                           value="e" 
                           class="mr-2 answer-option" 
                           data-soru-id="2222005" 
                           data-dogru="False">
                    E) HTML-XML
                  </label>
                
              </div>
              <p class="mt-2 text-sm text-green-600 hidden" id="feedback-2222005">Doğru Cevap!</p>
              <p class="mt-2 text-sm text-red-600 hidden" id="feedback-2222005-wrong">Yanlış Cevap!</p>
              <p class="mt-2 text-sm text-blue-600 hidden" id="correct-answer-2222005">
                Doğru Cevap: 
                
                  A) OWL-RDF
                
              </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
      });
    });

</body>
</html>