Изображение Qualtrics должно быть зафиксировано на свитке. Помогите новичку с Javascript + HTML - PullRequest
Новая
       5

Изображение Qualtrics должно быть зафиксировано на свитке. Помогите новичку с Javascript + HTML

0 голосов
/ 08 марта 2020

Я в основном пытаюсь сделать так, чтобы изображение оставалось в верхней части страницы c, а когда пользователь прокручивает страницу вниз, чтобы ответить на вопросы, изображение остается в этом положении c. Я заставил его работать в некоторой степени, используя этот html код: 

<div class = "image">
    <img src="https://jmsbconcordia.ca1.qualtrics.com/CP/Graphic.php?IM=IM_2nqZMvzMFTZHO4Z" width="600px" height="600px"/>
</div>

<div class = "image_spacer">                                                                                          
</div>
<style>
    .image{
        background: white;
        width:100%;
        z-index: 1000;
        text-align:center;
    }
    .image.fixed{
        position: fixed;
        top:0;
        left:0;
    }
    .image_spacer{
        height: 600px; 
        visibility: hidden;
        display:none;
    }
    .image_spacer.fixed{
        display:block;
    }
</style>

и этот javascript, который вставляется как в графическую / текстовую секцию, так и в секцию вопросов (только так, как я получил это Работа). 

Qualtrics.SurveyEngine.addOnReady(function()
{
     { $$('.image').forEach(ele=>ele.addClassName('fixed'));

});

Применительно к этим двум постам

Как сохранить весь элемент в Qualtrics на месте при прокрутке?

https://www.qualtrics.com/community/discussion/1622/keeping-an-image-frozen-in-place-when-scrolling-issue-with-spacer-element-in-javascript-amp-html

Изображение остается наверху, и вопрос правильно прокручивается, единственная проблема - изображение перекрывает вопросы, поэтому первые несколько вопросов полностью скрыты за изображением. Есть ли способ сделать пространство, чтобы опустить вопросы, чтобы изображение не перекрывало их при запуске опроса?

Вот что я имею в виду https://imgur.com/x3LbCwO

Я думаю, что мне нужно создать пространство на уровне графики / текста, но так как я не знаю HTML или Javascript, я не знаю, какой код вставлять. Рисунок / текст и вопрос являются частью тот же блок, но отдельные (т. е. сам график c не является частью описательного текста вопроса). Спасибо всем, кто может помочь!

...