Youtube Question

In Aliveforms, logic units can be be used for youtube Question for using WebSpeech API SpeechRecognition. It is very useful to allow users to give input using voice. It can be used to create tutorials, language learning apps and education apps etc.

Set up

Let's say we want to have a custom youtube question screen. So, on screen 0, we add custom property key youtube with value id of video, just id, not whole url

• youtube : aD91Zr4Fbng

Then we setup logic to handle these props.

Using Events

We can use event handling or special functions. If there are more than one logic units requiring special function on same screen, it is better to use $.Handle for those.

Inspector in our friend

Inspect elements to perform DOM manipulation.

Input Type: Execute JavaScript
Screen Index: -1

Execute JavaScript | -1

let len = $.HackForm().length;

let isThereYt = false;
for (let i = 0; i < len; i++) {
  let scr = $.HackForm(i);
  if (scr?.customProps?.youtube) {
    isThereYt = true;
    $.Handle(`screen_${i}_on_enter`, function() {
      hookYoutube(scr)
    });
  }
}

if (isThereYt) {
  hookCSS();
}

function hookCSS() {
  let st = document.createElement('style')
  st.innerHTML = 
  `.yt-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  }

  .yt-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  }`;

  document.head.appendChild(st)
}


function hookYoutube(scr) {
    let iframeSrc = iframeFromId(scr.customProps.youtube);
    setTimeout(function() {
      document.querySelector('.form_text_area').innerHTML = iframeSrc;
    }, 300)

}

function iframeFromId(id) {
  return `<div class='yt-container'><iframe src="https://www.youtube.com/embed/${id}?si=0zfwk4D1bPS5q0ec" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>`
}