{"id":14775,"date":"2025-03-10T15:30:16","date_gmt":"2025-03-10T12:30:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/"},"modified":"2025-03-10T15:30:16","modified_gmt":"2025-03-10T12:30:16","slug":"vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/","title":{"rendered":"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme"},"content":{"rendered":"

<\/p>\n

Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme<\/p>\n

Merhaba! Ben Fatih Soysal ve bu yaz\u0131da size sade JavaScript (Vanilla JavaScript) kullanarak etkile\u015fimli bir quiz uygulamas\u0131 nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, temel JavaScript bilgilerine sahip olan herkes i\u00e7in olduk\u00e7a uygulanabilir bir proje. \u00d6ncelikle HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m, daha sonra CSS ile stilde d\u00fczenleme yapaca\u011f\u0131z ve son olarak da JavaScript ile uygulaman\u0131n dinamik ve etkile\u015fimli i\u015flevlerini ekleyece\u011fiz. Bu sayede, teorik bilginizi pratik bir projeye d\u00f6n\u00fc\u015ft\u00fcrme \u015fans\u0131n\u0131z olacak. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!<\/p>\n

HTML Yap\u0131s\u0131<\/h2>\n

\u0130lk ad\u0131m\u0131m\u0131z, quiz sorular\u0131n\u0131 ve cevap se\u00e7eneklerini g\u00f6r\u00fcnt\u00fcleyecek HTML yap\u0131s\u0131n\u0131 olu\u015fturmak. A\u015fa\u011f\u0131daki kod blo\u011fu, basit bir quiz yap\u0131s\u0131 i\u00e7in gerekli HTML elementlerini i\u00e7erir:<\/p>\n

\n<div id=\"quiz\">\n  <h2 id=\"soru\">Soru 1: ...<\/h2>\n  <div id=\"cevaplar\">\n    <button class=\"cevap\">Cevap A<\/button>\n    <button class=\"cevap\">Cevap B<\/button>\n    <button class=\"cevap\">Cevap C<\/button>\n    <button class=\"cevap\">Cevap D<\/button>\n  <\/div>\n  <button id=\"sonraki\">Sonraki Soru<\/button>\n<\/div>\n<\/code><\/pre>\n
Bu HTML yap\u0131s\u0131, soruyu g\u00f6r\u00fcnt\u00fcleyecek bir ba\u015fl\u0131k (h2<\/code>), cevap se\u00e7eneklerini i\u00e7eren bir b\u00f6lme (div<\/code>) ve “Sonraki Soru” butonunu i\u00e7erir.  Bu elementlerin ID ve class de\u011ferleri, JavaScript kodumuzda elementlere eri\u015fmemizi kolayla\u015ft\u0131rmak i\u00e7in \u00f6nemlidir.  \u015eimdi CSS ile tasar\u0131m\u0131na bir g\u00f6z atal\u0131m.<\/p>\n
CSS ile Stil Verme<\/h2>\n
HTML yap\u0131m\u0131z haz\u0131r olduktan sonra, uygulaman\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc CSS ile d\u00fczenleyebiliriz.  A\u015fa\u011f\u0131daki kod blo\u011fu, basit bir stil uygulamas\u0131 \u00f6rne\u011fi g\u00f6stermektedir.  Elbette, kendi zevkinize ve tasar\u0131m tercihlerinize g\u00f6re bu stili \u00f6zelle\u015ftirebilirsiniz.  Bu sayede uygulaman\u0131z daha \u015f\u0131k ve kullan\u0131\u015fl\u0131 olacakt\u0131r.<\/p>\n
\n#quiz {\n  width: 500px;\n  margin: 0 auto;\n  text-align: center;\n  padding: 20px;\n  border: 1px solid #ccc;\n}\n<\/code><\/pre>\n
Bu CSS kodu, quiz yap\u0131s\u0131n\u0131n geni\u015fli\u011fini, kenar bo\u015fluklar\u0131n\u0131 ve stilini d\u00fczenler. Daha detayl\u0131 bir tasar\u0131m i\u00e7in bu kodu geni\u015fletebilirsiniz.  Sonraki ad\u0131mda en \u00f6nemli k\u0131s\u0131m olan JavaScript koduna ge\u00e7ece\u011fiz.<\/p>\n
JavaScript ile Etkile\u015fim<\/h2>\n
Uygulaman\u0131n as\u0131l i\u015flevselli\u011fi, JavaScript kodu ile sa\u011flan\u0131r.  A\u015fa\u011f\u0131da, sorular\u0131, cevaplar\u0131 ve puanlama mant\u0131\u011f\u0131n\u0131 i\u00e7eren bir JavaScript \u00f6rne\u011fi yer almaktad\u0131r.  Bu kod, \u00f6ncelikle sorular\u0131 ve cevaplar\u0131 i\u00e7eren bir dizi tan\u0131mlar ve daha sonra kullan\u0131c\u0131 etkile\u015fimlerini y\u00f6netir.  Bu i\u015flemler sonucunda kullan\u0131c\u0131n\u0131n do\u011fru cevaplar\u0131 tespit eder ve puan\u0131n\u0131 hesaplar.   <\/p>\n
\nconst quizSorulari = [\n  \/\/ Soru ve cevaplar burada tan\u0131mlan\u0131r...\n];\n\nlet mevcutSoru = 0;\nlet skor = 0;\n\n\/\/ ... (JavaScript fonksiyonlar\u0131 ve olay dinleyicileri) ...\n<\/code><\/pre>\n
Bu kod, basit bir quiz mant\u0131\u011f\u0131n\u0131 g\u00f6sterir.  Tam kod \u00f6rne\u011fi ve detayl\u0131 a\u00e7\u0131klamalar\u0131 i\u00e7in  bu ba\u011flant\u0131ya<\/a> g\u00f6z atabilirsiniz.  JavaScript ile dinamik i\u00e7erik olu\u015fturma, olaylar\u0131 ele alma ve DOM manip\u00fclasyonu gibi \u00f6nemli kavramlar\u0131 \u00f6\u011frenebilirsiniz.  Daha ileri seviye \u00f6zellikler i\u00e7in ek fonksiyonlar ve k\u00fct\u00fcphaneler kullanman\u0131z gerekebilir. Bu durum \u00f6zellikle daha karma\u015f\u0131k quiz yap\u0131lar\u0131 i\u00e7in ge\u00e7erlidir.<\/p>\n
Bu projede \u00f6\u011frendiklerinizle,  kendi quiz uygulaman\u0131z\u0131 geli\u015ftirebilir veya mevcut uygulaman\u0131z\u0131 geni\u015fletebilirsiniz.  Daha fazla web geli\u015ftirme  kayna\u011f\u0131 i\u00e7in  fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.  Bu t\u00fcr projelerde pratik yapman\u0131n \u00f6nemini unutmay\u0131n.  Bol bol kod yaz\u0131n ve deneyim kazan\u0131n!<\/p>\n
Umar\u0131m bu makale faydal\u0131 olmu\u015ftur.  Herhangi bir sorunuz veya \u00f6neriniz varsa, l\u00fctfen yorumlarda belirtin.  Ba\u015far\u0131lar!<\/p>\n
#Etiketler: javascript, vanilla javascript, quiz, uygulama, etkile\u015fimli, kodlama, programlama, web geli\u015ftirme, tutorial, e\u011fitim, HTML, CSS, DOM,  fatihsoysal.com<\/p>\n
<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme Merhaba! Ben Fatih Soysal ve bu yaz\u0131da size sade JavaScript (Vanilla…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-14775","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nVanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme<\/title>\n<meta name=\"description\" content=\"Merhaba! Ben Fatih Soysal ve bu yaz\u0131da size sade JavaScript (Vanilla JavaScript) kullanarak etkile\u015fimli bir quiz uygulamas\u0131 nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, temel JavaScript bilgilerine sahip olan herkes i\u00e7in olduk\u00e7a uygulanabilir bir proje. \u00d6ncelikle HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m, daha sonra CSS ile stilde d\u00fczenleme yapaca\u011f\u0131z ve son olarak da JavaScript ile uygulaman\u0131n dinamik ve etkile\u015fimli i\u015flevlerini ekleyece\u011fiz. Bu sayede, teorik bilginizi pratik bir projeye d\u00f6n\u00fc\u015ft\u00fcrme \u015fans\u0131n\u0131z olacak. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Ben Fatih Soysal ve bu yaz\u0131da size sade JavaScript (Vanilla JavaScript) kullanarak etkile\u015fimli bir quiz uygulamas\u0131 nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, temel JavaScript bilgilerine sahip olan herkes i\u00e7in olduk\u00e7a uygulanabilir bir proje. \u00d6ncelikle HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m, daha sonra CSS ile stilde d\u00fczenleme yapaca\u011f\u0131z ve son olarak da JavaScript ile uygulaman\u0131n dinamik ve etkile\u015fimli i\u015flevlerini ekleyece\u011fiz. Bu sayede, teorik bilginizi pratik bir projeye d\u00f6n\u00fc\u015ft\u00fcrme \u015fans\u0131n\u0131z olacak. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-10T12:30:16+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme\",\"datePublished\":\"2025-03-10T12:30:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/\"},\"wordCount\":555,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/\",\"name\":\"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-03-10T12:30:16+00:00\",\"description\":\"Merhaba! Ben Fatih Soysal ve bu yaz\u0131da size sade JavaScript (Vanilla JavaScript) kullanarak etkile\u015fimli bir quiz uygulamas\u0131 nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, temel JavaScript bilgilerine sahip olan herkes i\u00e7in olduk\u00e7a uygulanabilir bir proje. \u00d6ncelikle HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m, daha sonra CSS ile stilde d\u00fczenleme yapaca\u011f\u0131z ve son olarak da JavaScript ile uygulaman\u0131n dinamik ve etkile\u015fimli i\u015flevlerini ekleyece\u011fiz. Bu sayede, teorik bilginizi pratik bir projeye d\u00f6n\u00fc\u015ft\u00fcrme \u015fans\u0131n\u0131z olacak. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme","description":"Merhaba! Ben Fatih Soysal ve bu yaz\u0131da size sade JavaScript (Vanilla JavaScript) kullanarak etkile\u015fimli bir quiz uygulamas\u0131 nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, temel JavaScript bilgilerine sahip olan herkes i\u00e7in olduk\u00e7a uygulanabilir bir proje. \u00d6ncelikle HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m, daha sonra CSS ile stilde d\u00fczenleme yapaca\u011f\u0131z ve son olarak da JavaScript ile uygulaman\u0131n dinamik ve etkile\u015fimli i\u015flevlerini ekleyece\u011fiz. Bu sayede, teorik bilginizi pratik bir projeye d\u00f6n\u00fc\u015ft\u00fcrme \u015fans\u0131n\u0131z olacak. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/","og_locale":"tr_TR","og_type":"article","og_title":"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme","og_description":"Merhaba! Ben Fatih Soysal ve bu yaz\u0131da size sade JavaScript (Vanilla JavaScript) kullanarak etkile\u015fimli bir quiz uygulamas\u0131 nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, temel JavaScript bilgilerine sahip olan herkes i\u00e7in olduk\u00e7a uygulanabilir bir proje. \u00d6ncelikle HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m, daha sonra CSS ile stilde d\u00fczenleme yapaca\u011f\u0131z ve son olarak da JavaScript ile uygulaman\u0131n dinamik ve etkile\u015fimli i\u015flevlerini ekleyece\u011fiz. Bu sayede, teorik bilginizi pratik bir projeye d\u00f6n\u00fc\u015ft\u00fcrme \u015fans\u0131n\u0131z olacak. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!","og_url":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-03-10T12:30:16+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme","datePublished":"2025-03-10T12:30:16+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/"},"wordCount":555,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/","url":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/","name":"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-03-10T12:30:16+00:00","description":"Merhaba! Ben Fatih Soysal ve bu yaz\u0131da size sade JavaScript (Vanilla JavaScript) kullanarak etkile\u015fimli bir quiz uygulamas\u0131 nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, temel JavaScript bilgilerine sahip olan herkes i\u00e7in olduk\u00e7a uygulanabilir bir proje. \u00d6ncelikle HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m, daha sonra CSS ile stilde d\u00fczenleme yapaca\u011f\u0131z ve son olarak da JavaScript ile uygulaman\u0131n dinamik ve etkile\u015fimli i\u015flevlerini ekleyece\u011fiz. Bu sayede, teorik bilginizi pratik bir projeye d\u00f6n\u00fc\u015ft\u00fcrme \u015fans\u0131n\u0131z olacak. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vanilla-javascript-ile-etkilesimli-quiz-uygulamasi-gelistirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript ile Etkile\u015fimli Quiz Uygulamas\u0131 Geli\u015ftirme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/14775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=14775"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/14775\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=14775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=14775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=14775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}