<div class="modal riddle-modal fade" id="leaderboardTutorialModal" tabindex="-1" role="dialog" aria-labelledby="leaderboardTutorialModelLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="row">
          <div class="col-xl-10 col-lg-9">
            <h2 class="riddle-page-title mb-4">How does it work?</h2>
          </div>
          <div class="col-xl-2 col-lg-3" style="text-align: right;">
            <a onclick="return false;" href="#" data-dismiss="modal"><img src="<?php echo RIDDLE_IMAGE_PATH; ?>/icons/ic-x.png" alt="Riddle Close Button Icon"></a>
          </div>
        </div>

        <div class="row mb-3">
            <div class="col-sm-12">
                <h5 class="riddle-page-title mb-4">Video tutorial</h5>
                <iframe style="width: 100%;" src="https://www.youtube.com/embed/LglbFUawdGQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

                <h5 class="riddle-page-title mt-5 mb-4">Step-by-step tutorial</h5>
                <p><ol>
                    <li>Go to <a href="https://riddle.com" target="_bank">riddle.com</a></li>
                    <li>Go to the quiz you want to use on your leaderboard and go to the Riddle 'Collect Leads' overview inside the Riddle Creator</li>
                    <li>Create a leadform</li>
                    <li>Add the fields you specified inside the WP plugin using the drag & drop editor</li>
                    <li>Enter the same field IDs you entered inside the WP plugin (be aware of the spelling - the fields are case-sensitive meaning: 'name' and 'Name' are two different things!)</li>
                    <li>Paste the shortcode on the site your choice to display your leaderboard!</li>
                </ol> </p>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>