34Articulate Storyline 360 ile dinamik bir şekilde açılır menü oluşturmayı videoda adım adım anlattım. Aşağıda, videoda kullandığım kaynak kodlara da ulaşabilirsiniz.📌 Storyline 360 ile hazırlanmış bir örnek içerik: ÖnizleArticulate Storyline 360 eğitimlerime katılmak için learn.egiteknoloji.com web sitesindeki eğitimlere kayıt olarak 50’den fazla eğitim videosu ile temelden ileri düzeye doğru öğrenebilirsiniz. Ayrıca, Youtube kanalıma katılarak da üyelere özel videolardan faydalanabilirsiniz.Articulate Storyline 360 Eğitimi1. HTML KodlarıBu kodları web object adında bir klasöre oluşturduğunuz menu.html dosyasına yapıştırın.<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Storyline Bootstrap Dropdown</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <style> /* Saydamlık için ana container'a uygulanacak stil */ body, html { background-color: transparent !important; } /* Özel boyutlandırma için CSS */ .dropdown-menu-button-custom { font-size: 1.5rem; /* Buton yazı boyutu */ height: 60px; /* Buton yüksekliği */ width: 300px; /* Buton genişliği */ display: flex; /* Buton içeriğini hizalamak için */ align-items: center; /* Dikeyde ortala */ } .dropdown-menu-custom { width: 300px; /* Menü genişliği */ } .dropdown-menu-custom .dropdown-item { font-size: 1.2rem; /* Menü öğeleri yazı boyutu */ } </style> </head> <body class="p-3"> <div class="dropdown"> <button class="btn btn-light dropdown-toggle dropdown-menu-button-custom" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Seçiniz </button> <ul class="dropdown-menu dropdown-menu-custom" aria-labelledby="dropdownMenuButton" id="dropdownList"> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> function initDropdown() { let player = parent.GetPlayer(); let jsonString = player.GetVar("json_data"); try { let data = JSON.parse(jsonString); let dropdownList = document.getElementById("dropdownList"); dropdownList.innerHTML = ""; data.forEach(item => { let li = document.createElement("li"); let a = document.createElement("a"); a.className = "dropdown-item"; a.href = "#"; a.innerText = item.text; a.addEventListener("click", () => { player.SetVar("menu_active", item.text); player.SetVar("id", item.id); document.getElementById("dropdownMenuButton").innerText = item.text; }); li.appendChild(a); dropdownList.appendChild(li); }); } catch (e) { console.error("JSON parse hatası:", e); } } window.onload = initDropdown; </script> </body> </html>2.Javascript KodlarıBu kodu da trigger olarak ekleyin.// Storyline player referansı al var player = GetPlayer(); // Yeni JSON verisi (istersen burada dinamik oluşturabilirsin) var myData = [ {"id":1,"text":"Ahmet"}, {"id":2,"text":"Ali"}, {"id":3,"text":"Merve"}, {"id":4,"text":"Suna"} ]; // Tek satırlık stringe çevir var jsonString = JSON.stringify(myData); // Storyline değişkenine ata player.SetVar("json_data", jsonString);Bu yazıyı yararlı buldunuz mu?Evet1Hayır0
