Rise (Video OR Transcript to Continue)

I created an experimental functionality to address the issue with using a divider block with a perquisite to complete a video before continuing in the course.

If an author wants to also offer a Video Transcript, using the accordion component, the author can no longer have a dependency on the user watching the video before continuing. The user should have the option to watch the video OR read the transcript.

Currently, Rise does not support this logic, and the user must complete all blocks, or the block directly above the divider to continue.

I have built some functionality that can be added to a Code block in Rise. Add the following to the Code block. 

<!-- REBUS MEDIA - RISE CODE BLOCKS - NATIVE VIDEO TRANSCRIPT :: START -->
<style>
    .blocks-accordion__container.transcript {
        transition: all 0.1s ease-in-out;
    }

    .blocks-accordion__container.transcript.off {
        height: 90px;
        opacity: 0;
        overflow: hidden;
    }
</style>
<script>
    // add the local style to the parent document
    const localStyleTag = document.querySelector('style');
    const parentDoc = window.parent.parent.document;
    const styleId = 'rebus-custom-style';
    if (localStyleTag && window.parent && window.parent.parent && parentDoc) {
        let parentStyleTag = parentDoc.getElementById(styleId);
        if (!parentStyleTag) {
            parentStyleTag = parentDoc.createElement('style');
            parentStyleTag.id = styleId;
            parentDoc.head.appendChild(parentStyleTag);
        }
        parentStyleTag.textContent = localStyleTag.textContent;
    }

    function hideContainer()
    {
        const container = parentDoc.querySelector('section.blocks-lesson > div:first-child');
        if (container) {
            container.style.display = 'none';
        }
    }
    function switchTranscript (btn, off) {
        off ? btn.classList.add('off') : btn.classList.remove('off');
    }
    function init(){
        if(parentDoc.querySelectorAll('.transcript').length > 0) {
            return;
        }
        const blocks = parentDoc.querySelectorAll('.blocks-accordion__container');
        blocks.forEach(function (block, ix) {
            const title = block.querySelector('.blocks-accordion__title div');
            // globals.log(['el',el, 'title', title]);
            if (title.textContent.indexOf('{{T}}') !== -1) {
                // add the transcript class to the block
                block.classList.add('transcript');
                // remove the directive
                title.textContent = title.textContent.replace('{{T}}', '');
                // get the button
                const transscriptBtn = title.closest('button');
                // get the video or audio;
                let mediacontainer = transscriptBtn.closest('[data-block-id][data-change-path]')
                    .previousSibling;
                // need to check for audio as this may be a captions block
                if (mediacontainer.querySelector('a[download$=vtt]') !== null) {
                    mediacontainer = mediacontainer.previousSibling;
                }
                //
                mediacontainer.dataset.hasTranscript = true;
                // globals.log(['mediacontainer',mediacontainer]);
                // get video
                const media = mediacontainer.querySelector('video, audio');
                if (media !== null) {
                    media.addEventListener('ended', function () {
                        switchTranscript(block, true);
                        // opens and closes the accordion to complete it.
                        transscriptBtn.click();
                        setTimeout(function () {
                            transscriptBtn.click();
                            switchTranscript(block, false);
                        }, 1);
                    });
                }
            }
        });
        // hide the code block container
        hideContainer();
    }
    init();
</script>
<!-- REBUS MEDIA - RISE CODE BLOCKS - NATIVE VIDEO TRANSCRIPT :: END -->

Then in the title of your Video Transcript accordion component, include the following special characters in the button title "{{T}}", for example:

The way this works (yes, it's a bit of a hack), is that the divider dependency is placed on the Video Transcript accordion only. When the video (native Rise video player) is completed, the video complete trigger then executes an quick open/close on the Transcript button which is enough to meet the requirement to enable the divider button.