Остановить изображение в верхней части блока Qualtrics

Question

Я пытаюсь заморозить изображение в верхней части блока опроса Qualtrics.

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

Я пытаюсь использовать код Энтони Ривас , любезно предоставленный в этом сообщении, чтобы сделать это:

Как чтобы весь элемент в Qualtrics оставался на месте при прокрутке?

<div class = "image">
    <img src="IMAGE LOCATION HERE" width="395px" height="395px"/>
</div>

<div class = "image_spacer">
    This is a spacer element
</div>

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

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

Что расстраивает, так это то, что это сработало для меня ранее в другом опросе! Возможно ли, что Qualtrics могли что-то изменить, и теперь этот код нуждается в обновлении? (Я не знаком с html или JS, поэтому я не могу выяснить причину.)

ОБНОВЛЕНИЕ: Я заменил JS Энтони на показанный здесь

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

... и теперь изображение блока заморожено вверху, НО за ним скрыт вопрос 1.