Untitled

<!-- Step 1 - Intro -->
<form action="index.php" method="post">
    <section id="intro-section" class="intro-section">
        <h2 class="visually-hidden">Teasting intro</h2>
        <p class="intro-section__text">
            At GlamSavor you will find your dining experience that is as <span
                class="intro-section__text--highlight">unique</span> as you are. With this test you will find the meal
            that suits you exactly. We will find your taste preference that matches your fabulous photo.
        </p>
        <div class="intro-section__form-container">
            <h2 class="intro-section__form-title">name:</h2>

            <input type="text" class="intro-section__input" name="name" required placeholder="name" size="30">
        </div>
        <button id="intro-button" class="intro-section__button">let's start</button>
    </section>

    <!-- Step 2 - Country -->
    <section id="country-section" class="visually-hidden">
        <h2 class="question">Which country do you think has the tastiest cuisine?</h2>

        <div class="slider">
            <?php foreach ($countries as $country): ?>
            <div class="slider__slide">
                <p class="slider__country-name"><?php echo $country['name']; ?></p>
                <input type="text" class="slider__input visually-hidden" name="country"
                    value="<?php echo $country['name']; ?>" />
                <div class="slider__content">
                    <label onclick="selectCountry()" class="slider__button" name="answer" id="<?php echo $country['name']; ?>"> 
                    <img class="slider__flag" src="assets/<?php echo $country['icon']; ?>"
                            alt="<?php echo $country['name']; ?>">
                    </label>
                    <input type="radio" for="<?php echo $country['name']; ?>">
                    <img class="slider__background" src="assets/<?php echo $country['background']; ?>" alt="">
                </div>
            </div>
            <?php endforeach; ?>
            <div class="slider__controls">
                <button class="slider__control slider__control--prev" onclick="prevSlide()">&#10094;</button>
                <button class="slider__control slider__control--next" onclick="nextSlide()">&#10095;</button>
            </div>
        </div>
    </section>

    <!-- Step 3 - Hat -->
    <section id="hat-section" class="visually-hidden">
        <h2 class="question">Make your hat delicious!</h2>
        <img class="hat-question__image" src="assets/had.png" alt="Delicious hat image">
        <?php: ?>
        <input type="radio" class="hat-question__input visually-hidden" id="" name="" value="" />
        <?php ?>
    </section>

    <!-- Step 4 - Smile -->
    <section id="smile-section" class="visually-hidden">
        <h2 class="question">Which smile is similar to your smile?</h2>
        <div class="smile-selector">
                <?php foreach ($smilies as $smile): ?>
                <label class="smile-selector__label" for="<?php echo $smile['taste']; ?>" draggable="true"
                    ondragstart="drag(event)" data-smile="<?php echo $smile['taste']; ?>">
                    <img id="<?php echo $smile['taste']; ?>" class="smile-selector__icon"
                        src="assets/<?php echo $smile['icon']; ?>" alt="<?php echo $smile['taste']; ?>">
                </label>
                <?php endforeach; ?>
                <div class="smile-selector__image-container" ondragover="allowDrop(event)" ondrop="drop(event)">
                    <img class="smile-selector__image" src="assets/chloe.png" alt="">
                </div>
                <button id="submitButton" class="smile-selector__button selector__button--submit" type="submit">this is
                    me</button>
                <button class="smile-selector__button selector__button--back" type="button"
                    onclick="history.back()">back</button>
        </div>
    </section>
</form>