Skill picker

v1.0.0Requires JS

<!-- Version: 1.0.0 -->
<div class='body-container body-container--skillpicker'>
    <article class='step-body overflow-y-auto'>
        <div class='step-content mt-16'>
            <h1 class='step-title step-title--lg'>Just one question.</h1>
            <div class='step-description'>
                <p>On a scale of 1 to 7, how confident are you that you would be able to complete a do-it-yourself project if instructions and materials are provided?</p>
            </div>
            <div class='radio-box'>
                <div class='radio-box__item'>
                    <input  type='radio' name='radio-group' id='1' value='1'>
                    <label for='1'>1</label>
                    </input>
                </div>
                <div class='radio-box__item'>
                    <input  type='radio' name='radio-group' id='2' value='2'>
                    <label for='2'>2</label>
                    </input>
                </div>
                <div class='radio-box__item'>
                    <input  type='radio' name='radio-group' id='3' value='3'>
                    <label for='3'>3</label>
                    </input>
                </div>
                <div class='radio-box__item'>
                    <input checked type='radio' name='radio-group' id='4' value='4'>
                    <label for='4'>4</label>
                    </input>
                </div>
                <div class='radio-box__item'>
                    <input  type='radio' name='radio-group' id='5' value='5'>
                    <label for='5'>5</label>
                    </input>
                </div>
                <div class='radio-box__item'>
                    <input  type='radio' name='radio-group' id='6' value='6'>
                    <label for='6'>6</label>
                    </input>
                </div>
                <div class='radio-box__item'>
                    <input  type='radio' name='radio-group' id='7' value='7'>
                    <label for='7'>7</label>
                    </input>
                </div></div>
        </div>
        <!-- Step Footer -->
<div class='step-footer--wrapper'>
    <footer class='step-footer step-footer--vertical'>
    <button onclick='skillButtonClicked()'class='btn btn--lg btn-full-width btn--primary'>Next step</button>
    <button onclick='dialogResponseWithValue("secondary")' data-popup-trigger='modal'  class='popup-trigger btn btn--lg btn-full-width btn--secondary'>What is this?</button>
</footer>
</div>

    </article>
</div>
<div class='modal popup-modal popup-modal--full' data-popup-modal='modal'>
  <!-- Step Header -->
  <header class='step-header'>

    <!-- Right Header Button -->
    <button class='step-header__action right-0 popup-modal__close '>
      <svg class='w-5 h-5' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
        <path fill-rule='evenodd' clip-rule='evenodd'
          d='M18.67 2.92a1.125 1.125 0 00-1.59-1.59L10 8.41 2.92 1.33a1.125 1.125 0 10-1.59 1.59L8.41 10l-7.08 7.08a1.125 1.125 0 101.59 1.59L10 11.592l7.08 7.08a1.125 1.125 0 001.59-1.591L11.592 10l7.08-7.08z'
          fill='currentColor'></path>
      </svg>
    </button>

  </header>
  <article class='step-body overflow-y-auto'>
    <div class='step-content mt-4'>

      <h1 class='step-title'>Why is this important?</h1>

      <div class='step-description '>
        <p>Answering this question will ensure that you get the best app experience possible. It’s important to respond accurately because it will help us provide you with the right level of support.</p>
      </div>

    </div>
  </article>
</div>
<!-- Modal Popup -->
<div class='modal popup-modal popup-modal--full' data-popup-modal=''>
    <!-- Step Header -->
<header class='step-header'>
    <!-- Right Header Button -->
    <button  class='step-header__action right-0 popup-modal__close'>
        <svg class='w-5 h-5' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' d='M18.67 2.92a1.125 1.125 0 00-1.59-1.59L10 8.41 2.92 1.33a1.125 1.125 0 10-1.59 1.59L8.41 10l-7.08 7.08a1.125 1.125 0 101.59 1.59L10 11.592l7.08 7.08a1.125 1.125 0 001.59-1.591L11.592 10l7.08-7.08z' fill='currentColor'/></svg>
    </button>
</header>
    <article class='step-body overflow-y-auto'>
        <div class='media-container loading'>
    <img src='https://i.imgur.com/4BHACE5.png' />
</div>


        <div class='step-content mt-4'>

    <h1 class='step-title '>Why is this important?</h1>


    <div class='step-description '>
        <p>Answering this question will ensure that you get the best app experience possible. It’s important to respond accurately because it will help us provide you with the right level of support.</p>
    </div>

        </div><!-- Step Footer -->
<div class='step-footer--wrapper'>
    <footer class='step-footer step-footer--vertical'>
    <button  class='btn btn--lg btn-full-width btn--primary popup-modal__close popup-modal__finished'>I've done this</button>
</footer>
</div>
</article>
</div>
<!-- /End Modal Popup -->

function primaryButtonClicked(message){
    let val = document.querySelector('input[type="radio"]:checked').value;
    var message = {"skillpickerValue":val}
    window.webkit.messageHandlers.SweeprNativeCallback.postMessage(message)
}

document.querySelector('.btn--primary').addEventListener('click', function(){
    primaryButtonClicked()
})