Как создавать интерактивы

На сайте есть интерактивы внутри уроков, например:

• Интерактив с кубами
• С кипячением
• С дробями
• C одеждой
• Про словообразование

Код интерактива хранится в одном файле name.js, где name — произвольное название. При загрузке код должен создать интерактив внутри изначально пустого

<div id="interactive-{name}" class="interact"></div>

Соотвественно, HTML и CSS хранится внутри JS файла с интерактивом.

Код для интерактива с кастрюлей bact-pot.js:

jQuery(document).ready(function ($) { //Подключать jQuery нужно именно так
    id = "#interactive-bact-pot" //id пустого div

    //Добавляем HTML и CSS в наш div
    $(id).append(`
        <style>
            .bacteria_images img {
                display: none;
            }

            #temp_reg {
                position: relative;
            }

            #arm {
                cursor: pointer;
            }

            #circle {
                width: 150px;
                height: 150px;
                background-color: var(--secondary_background);
                border-radius: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 70px 60px 60px 60px;
            }

            #pointer {
                position: absolute;
                width: 190px;
                height: 30px;
                background-color: var(--lightgray);
                border-radius: 50vh;
                display: flex;
                align-items: center;
                overflow: hidden;
            }

            #pointer div {
                width: 50px;
                height: 10px;
                background-color: var(--secondary);
                border-radius: 0 100vh 100vh 0;
            }

            .pot_label {
                font-family: var(--header_font);
                font-weight: var(--header_weight);
                font-size: 25px;
                position: absolute;
            }

            .pot_label.zero {
                left: 0;
                bottom: 10px;
            }

            .pot_label.one {
                left: 0;
                right: 0;
                margin: auto;
            }

            .pot_label.two {
                top: 35px;
                right: 35px;
            }

            .pot_label.three {
                top: 128px;
                right: 0;
            }
        </style>
        <div class="box">
        <div class="bacteria_images jc">
            <img src="/wp-content/uploads/2023/08/kastryulya0.svg">
            <img src="/wp-content/uploads/2023/06/kastryulya1-01.svg">
            <img src="/wp-content/uploads/2023/06/kastryulya2-01.svg">
            <img src="/wp-content/uploads/2023/06/kastryulya3-01.svg">
            <img src="/wp-content/uploads/2023/06/kastryulya4-01.svg">
            <img src="/wp-content/uploads/2023/06/kastryulya5-01.svg">
        </div>

        <div class="mt text-center" id="pot_desc">
        Сколько времени нужно, чтобы уничтожить все бактерии?
        </div>

        <div class="mt jc text-center">
            <div class="text-center" id="temp_reg">
            <div class="pot_label zero">ВЫКЛ</div>    
            <div class="pot_label one">1</div>
                <div class="pot_label two">2</div>
                <div class="pot_label three">3</div>
                <div id="arm">
                    <div id="circle" class="mt">
                        <div id="pointer">
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `)

    //JS код интерактива

    $("#interactive-bact-pot .bacteria_images img").eq(0).show()

    let state = 0

    $("#arm").css("transform", 'rotate(315deg)')
    $("#arm").click(function () {
        state++;
        if (state == 4) {
            state = 0;
        }
        deg = 0
        celc = 0
        time = 0
        switch (state) {
            case 0:
                deg = 315
                break
            case 1:
                deg = 90
                celc = 70
                time = 30
                break
            case 2:
                deg = 135
                celc = 85
                time = 15
                break
            case 3:
                celc = 100
                time = 5
                deg = 180
                break
        }
        
        if (state == 0) {
            $("#pot_desc").html(`Сколько времени нужно, чтобы уничтожить все бактерии?`)
        } else {
            $("#pot_desc").html(`Температура: ${celc} °C.<br>Времени потребуется: ${time} минут.`)
        }
        $(this).css("transform", `rotate(${deg}deg)`)
        startPot()
    })

    let timer
    function startPot () {
        $("#interactive-bact-pot .bacteria_images img").hide()
        clearInterval(timer)

        if (state == 0) {
            $("#interactive-bact-pot .bacteria_images img").eq(0).show()
            return
        } else {
            $("#interactive-bact-pot .bacteria_images img").eq(1).show()
        }

        seconds = 1
        if (state == 1) {
            seconds = 4
        } else if (state == 2) {
            seconds = 2.5
        }

        imageIndex = 1

        timer = setInterval(function () {
            imageIndex++
            $("#interactive-bact-pot .bacteria_images img").hide()
            $("#interactive-bact-pot .bacteria_images img").eq(imageIndex).show()
            if (imageIndex == 5) {
                clearInterval(timer)
            }
        }, seconds * 1000)

    }

})

Как вы заметили, в HTML используются классы, не прописанные в интерактиве. Это глобальные классы сайта, хранящиеся в style.css. Вам нужно использовать их для стилизации кнопок, шрифтов и других общих элементов.

Ссылка на style.css: https://obrazavr.ru/wp-content/themes/Main/style.css

Попробуйте создать у себя на компьютере песочницу, чтобы этот код работал как на сайте. Перед URL картинок нужно вставить https://obrazavr.ru. Тогда вы сможете удобно тестировать код интерактивов и быть уверенным, что они будут работать при загрузке на сайт.

Идеи интерактивов можно посмотреть в следующем уроке.