İnteraktif Quiz App'ini Tek Kodla Üret!
Tamamen işlevsel, tek dosyalı bir quiz uygulaması oluşturan frontend geliştirme promptudur. HTML, CSS ve JavaScript kullanarak, herhangi bir framework veya kütüphane gerektirmeden çalışan, responsive bir quiz sistemi üretir.
Prompt, belirtilen konu ve soru sayısına göre özelleştirilmiş bir quiz uygulaması kodu oluşturur. Her soru için çoktan seçmeli seçenekler, doğru cevap kontrolü, ilerleme çubuğu, skor hesaplama ve zamanlayıcı gibi özellikler otomatik olarak entegre edilir. Modern CSS teknikleri (Flexbox, Grid) kullanılarak mobil ve masaüstü uyumlu tasarım sağlanır.
Çıktı, doğrudan .html dosyası olarak kaydedilebilir ve tarayıcıda açılabilir formatta sunulur. Renk şeması ve tema tercihleri, CSS animasyonları ve geçişleriyle görsel olarak çekici bir arayüz oluşturulur. Eğitim kurumları, şirket içi eğitimler veya kişisel öğrenme projeleri için profesyonel bir çözümdür. Kod sonunda özelleştirme talimatları da eklenir.
{ }Değişken Açıklamaları:
- [QUİZ KONUSU]: Quiz uygulamasının ana konusu. Başlık ve içerik bu konuya göre şekillendirilir. Örneğin; JavaScript Temelleri, Türkiye Tarihi, Biyoloji 101, Pazarlama Stratejileri
- [SORU SAYISI, ÖRNEĞİN: 10]: Quiz içinde yer alacak toplam soru adedi. Uygulama bu sayıya göre yapılandırılır. Örneğin; 10, 15, 20, 5
- [SORULAR LİSTESİ JSON]: Soruların JSON formatında tam listesi. Her soru metni, seçenekler ve doğru cevap indeksi içerir. Örneğin; [QUESTİON JAVASCRİPT NEDİR], 'correct': 0}]
- [RENK ŞEMASI]: Uygulamanın görsel tasarım tercihleri. CSS stilleri bu şemaya göre oluşturulur. Örneğin; Koyu mavi tonları ve gradient arka plan, minimalist beyaz-siyah, canlı renkler, pastel tonlar
Değişkenleri Düzenle
You are an expert frontend developer specializing in vanilla HTML, CSS, and JavaScript. Create a complete, standalone, single HTML file (with embedded CSS and JS) for a fully interactive quiz application. The quiz topic is [QUİZ KONUSU]. Include exactly these [SORU SAYISI, ÖRNEĞİN: 10] questions with multiple choices and correct answers: [SORULAR LİSTESİ JSON], 'correct': 0}, ...]]. Features: Show one question at a time, progress bar, score counter at end with percentage and restart button, timer per question optional, responsive design for mobile/desktop using Flexbox/Grid. Use modern styling with [RENK ŞEMASI]. Make it engaging with animations (CSS transitions). Output the full code as plain text, ready to save as .html and open in browser. Explain briefly how to customize further at the end.
Bu Prompt Seni Bekliyor
Claude için hazırlanmış bu promptu anında kopyala, kullan.
Ücretsiz üye ol, binlerce prompta eriş.
10 saniyede üye ol, sınırsız prompt keşfet
Nile
Bu prompt kullanmadan önce düzenlemeniz gereken 4 değişken içerir.
Keşfet
Alternatif Araçlar
Biliyor muydunuz?
Çok uzun cevap isteniyorsa 'Bana önce başlıkları ver, sonra her birini onayladığımda detaylandır' diyerek interaktif ve kontrollü ilerleyebilirsin.
En Popüler
Benzer promptlar
Topluluk Görüşleri
Bu içerik hakkında üyeler neler düşünüyor?
Topluluğa Katılın
Promptlarını paylaşmak, favorilerini kaydetmek ve içerik üreticileriyle etkileşime geçmek için hemen ücretsiz üye ol.