freeze audio card when scrolling down

1

I have custom recipe that mixes audio with multiple text_input cards.
I have to scroll down to fill them. how can I freeze the audio card so that while scrolling it still there and I can easily listen to the part I need with out going to up again

2

Hi @Bodor,

Please see this post on making the subset of blocks scrollable. Let us know if you need help adapting it to your use case!

Another option is to switch to Prodigy's new pages UI, where you can define series of annotation cards (pages) that all belong to the same task. Imagine that each page would contain a copy of the same audio block and a different text block. This way you could avoid scrolling altogether.

3

thanks for replying @magdaaniol , I'm using a ready implemented views (audio_manual,choice,and text_input), I don't want to go with complication of html view as I need to annotate the data as soon as possible, is there is a way to make it with css for instead ?

4

Hi @Bodor,

Yes, you should be able to achieve the effect of a sticky audio block with CSS. You'll want to use the position: sticky property, which removes the element from the normal document flow and positions it relative to the parent container. Here's an example implementation:

/* Audio controls section */
.prodigy-container [class*="_AudioCard-shortcuts"] {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1002; /* Slightly higher than the player to ensure controls stay on top */
}

/* Audio player + minimap section */
div.prodigy-content:nth-child(3) {
    position: sticky;
    top: 40px;
    background-color: white;
    z-index: 1001;
    margin-top: 0; /* Ensure no gap between controls and player */
}

/* Ensure any interactive elements in the player remain clickable */
div.prodigy-content:nth-child(3) * {
    z-index: 1001;
}

You might need to adjust the CSS selectors to your custom implementation, but assuming the following example blocks:

blocks = [
        {"view_id": "audio"},
        {"view_id": "choice", "text": None, "audio": None},
        {"view_id": "text"},
        {"view_id": "text"}
    ]

The effect should be:
ezgif.com-video-to-gif-converter