anki-backand-video-templage.html

{{FrontSide}}

<hr id=answer>

<div id="media-container"></div>

<script>
function ttt() {
    const rawJson = `{{Back}}`; // Use backand field for variants JSON

    let mediaItems = [];
    try {
        mediaItems = JSON.parse(rawJson);
    } catch (err) {
        console.error("Ошибка парсинга JSON:", err, rawJson);
        return;
    }

    const container = document.getElementById("media-container");

    mediaItems.forEach((item, index) => {
        const wrapper = document.createElement("div");
        wrapper.style.marginBottom = "1em";

        // Description (if present)
        const desc = document.createElement("div");
        desc.textContent = item.desc || "";
        desc.style.fontWeight = "bold";

        // Video
        const video = document.createElement("video");
        video.src = item.file;
        video.controls = true;
        video.style.width = "100%";

        video.addEventListener("loadedmetadata", () => {
            video.currentTime = item.start || 0;
        });

        // Definitions container (initially hidden)
        const defContainer = document.createElement("div");
        defContainer.id = `definitions-${index}`;
        defContainer.style.display = "none";
        defContainer.style.marginTop = "0.5em";

        // Definitions list
        if (item.definitions && Array.isArray(item.definitions)) {
            const ul = document.createElement("ul");
            item.definitions.forEach(def => {
                const li = document.createElement("li");
                li.textContent = def;
                ul.appendChild(li);
            });
            defContainer.appendChild(ul);
        } else {
            defContainer.textContent = "No definitions available";
        }

        // Toggle button
        const toggleBtn = document.createElement("button");
        toggleBtn.textContent = "Show Definitions";
        toggleBtn.style.marginTop = "0.5em";
        toggleBtn.onclick = () => {
            defContainer.style.display = defContainer.style.display === "none" ? "block" : "none";
            toggleBtn.textContent = defContainer.style.display === "none" ? "Show Definitions" : "Hide Definitions";
        };

        wrapper.appendChild(desc);
        wrapper.appendChild(video);
        wrapper.appendChild(toggleBtn);
        wrapper.appendChild(defContainer);
        container.appendChild(wrapper);
    });
}
ttt();
</script>