Widget code

by FiddlerMMM

HTML

<li class="form-line" data-type="control_textarea" id="id_{question_id}"><label class="form-label form-label-top form-label-auto" id="label_{question_id}" for="input_{question_id}" aria-hidden="false" style="display:none;"> Enter Text Here </label>
        <div id="cid_{question_id}"  class="form-input-wide" data-layout="full"> <textarea id="input_{question_id}" class="form-textarea" name="{question_id}_enterText" data-component="textarea" aria-labelledby="label_{question_id}" style="display:none;"  > </textarea>


      
      <!-- WIDGET <div id="widgetPlaceholder"></div> -->
  <div>   <!-- WIDGET-->
    <!-- WIDGETInstructions: change question_id to match the text of the question you wish to replace and delete the html for the question replaced by the html below-->
      <script>
          // Define the question ID
          const question_id = '5';

          // Generate the HTML dynamically using the question_id
          const htmlContent = `
          <li id="id_${question_id}"> <textarea id="input_${question_id}" name="q${question_id}_enterText" style="display: none" ></textarea> </li> 
          <!-- Placeholder for the custom question -->          
          <li class="form-line" data-type="control_div"><div id="widgetPlaceholder"></div></li>`;

          // Insert the HTML into the widget
          document.currentScript.insertAdjacentHTML('afterend', htmlContent);
      </script>
      <script>
          // WIDGET JAVASCRIPT widget.js

          (function() {
              // Function to dynamically load a script
              function loadScript(src, callback) {
                  var script = document.createElement('script');
                  script.onload = callback;
                  script.src = src;
                  document.head.appendChild(script);
              }

              // Function to dynamically load a stylesheet
              function loadStylesheet(href) {
                  var link = document.createElement('link');
              ...