post.hbs

{{!< default}}

{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

<header class="site-header outer">
  <div class="inner">
    {{> "site-nav"}}
  </div>
</header>
<script type="text/javascript" src="{{asset "js/message.js"}}"></script>
<script src="https://codefund.app/properties/251/funder.js" async="async"></script>
<script type="text/javascript">
  function generateMSG(tag) {
    if (msg_contents['display'] == 0) {
      var elem = document.querySelector('#global_message');
      elem.style.display = 'none';
      return;
    }
    if (msg_contents['announce'] == 0) {
      if (tag in msg_contents) {
        msg = msg_contents[tag];
      } else {
        msg = msg_contents['message'];
      }
    } else {
      msg = msg_contents['global'];
    }
    num = Math.floor(Math.random() * msg.length);
    msg = msg[num];
    var text = msg['text'];
    var link = msg['link'];
    var msg_box = document.getElementById('global_message');
    var a = document.getElementById('global_message_link');
    a.href = link;
    a.innerHTML = text;
    msg_box.onclick = function () {
      window.open(link, "_blank");
    };
  }
</script>
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}

<main id="site-main" class="site-main outer" role="main">
  <div class="inner">

    <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

      <header class="post-full-header">
        <h1 class="post-full-title" style="color:#292929; font-size:30px ; ">{{title}}</h1>
        <div id="global_message"
          style="cursor:pointer; background:rgb(181, 222, 250); padding-top:20px; padding-bottom:20px;">
          <a id='global_message_link' target="_blank" style="font-color: #a0a1a1; "></a>
          {{#if tags}}
          <p id="hidden" hidden>{{primary_tag.name}}</p>
          <script>generateMSG(document.getElementById('hidden').innerText);</script>
          {{else}}
          <script>generateMSG('message');</script>
          {{/if}}
        </div>
        <br>
        {{!--
        <p style="display: inline-block; font-size: 75%">Share this:</p>
        <h4 style="display: inline-block"><span>

            <a href="#" style="color: #1b1e21">
              <div data-network="twitter" class="st-custom-button fa fa-twitter-square "></div>
            </a>
            <a href="#" style="color: #1b1e21">
              <div data-network="facebook" class="st-custom-button fa fa-facebook-square"></div>
            </a>
            <a href="#" style="color: #1b1e21">
              <div data-network="linkedin" class="st-custom-button fa fa-linkedin-square"></div>
            </a>
            <a href="#" style="color: #1b1e21">
              <div data-network="googleplus" class="st-custom-button fa fa-google-plus-square"></div>
            </a>
          </span></h4>
          --}}


        {{!--       <div class="header_social_tab">
                <!-- Twitter-->
              <a class="social_media_header_links" style="background: #00aced;" href="https://twitter.com/share?text=You will love this article on {{encode title}}&amp;url={{url absolute="true"}}"
                  onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;">
                  <i class="fa fa-twitter" style="transform:scale(1.3);"></i>
              </a>
                  <!-- Facebook-->
              <a class="social_media_header_links" style="background: #3b5998;" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
                  onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
                  <i class="fa fa-facebook" style="transform:scale(1.3);"></i>
              </a>
                <!--linkedin-->
                <a class="social_media_header_links" style="background: #0077b5;" href="https://www.linkedin.com/shareArticle?mini=true&url={{url absolute="true"}}&title={{encode title}}"
                    onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
                    <i class="fa fa-linkedin" style="transform:scale(1.4);"></i>
                </a>
                  <!-- googleplus-->
                <a class="social_media_header_links " style="background: #dd4b39;" href="https://plus.google.com/share?url={{url absolute="true"}}"
                    onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
                    <i class="fa fa-google-plus header_social_icon " style="transform:scale(1.4);"></i>
                </a>

              </div> --}}


        {{!--  taglist : display the list of tags  --}}
        <div class="upper_taglist">
          <h4 id="text" class="less">

            <div id="taglist">


              {{#if tags}}

              {{#foreach tags}}

              <a target="_blank" href="{{url}}" title="{{name}}" class="tag_item">{{name}}</a>

              {{/foreach}}

              {{/if}}


            </div>
          </h4>
        </div>


        <button id="more" class="more-tags-button">More</button>
        <button id="less" class="more-tags-button">Less</button>

        {{!--  taglist --}}

        <div id="codefund"><!-- fallback content --></div>

      </header>

      <button id="scrollBtn" class="fa fa-angle-up" title="Go to top"></button>

      <section class="post-full-content">

        {{content}}
      </section>

      <!-- Discourse forum -->

  </div>

  <!-- shuffle button -->
  {{!-- Email subscribe form at the bottom of the page --}}
  {{#if @labs.subscribers}}
  <section class="subscribe-form">
    <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
    <p>Get the latest posts delivered right to your inbox</p>
    {{subscribe_form placeholder="youremail@example.com"}}
  </section>
  {{/if}}

  <footer>
    {{!-- Everything inside the #author tags pulls data from the author --}}
    <div class="post-full-footer">
      {{#author}}

      <section class="author-card">
        {{#if profile_image}}
        <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
        {{/if}}

        <section class="author-card-content">
          <h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
          {{#if bio}}
          <p>{{bio}}</p>
          {{else}}
          <p>Read <a href="{{url}}">more posts</a> by this author.</p>
          {{/if}}
        </section>



      </section>

      <div class="post-full-footer-right">
        <a class="author-card-button" href="{{url}}">Read More</a>
      </div>



      {{/author}}

    </div>
    {{!-- Displaying secondary authors --}}
    {{#if authors from="2"}}
    <div class="Authors_list">
      {{#foreach authors from="2"}}

      <a href="{{url}}" title="{{name}}" class="author author-{{id}} {{slug}}">
        <div class="Authors_tag_item " href="{{url}}" title="{{name}}">
          {{#if profile_image}}
          <img class="co-author-profile-image" src="{{profile_image}}" alt="{{name}}" />
          {{/if}}
          {{name}}
        </div>
      </a>

      {{/foreach}}
    </div>
    {{/if}}


    {{!-- footer list of tags --}}

    <h4>
      <div class="taglabel">

        <h4><i class="fa fa-tag"></i> Tags</h4>
      </div>
      <div class="taglist">
        {{#if tags}}

        {{#foreach tags}}
        <a target="_blank" href="{{url}}" title="{{name}}" class="tag_item">{{name}}</a>
        {{/foreach}}

        {{/if}}
      </div>
      </li>
    </h4>


  </footer>

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- horizontal ad -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-6329206778297580"
       data-ad-slot="1857266178"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
  </script>



  {{!-- Comments --}}
  <div id='discourse-comments'></div>

  {{!--

            If you use Disqus comments, just uncomment this block.
            The only thing you need to change is "test-apkdzgmqhj" - which
            should be replaced with your own Disqus site-id.

            <section class="post-full-comments">
                <div id="disqus_thread"></div>
                <script>
                  var disqus_config = function () {
                    this.page.url = '{{url absolute="true"}}';
                    this.page.identifier = 'ghost-{{comment_id}}';
                  };
                  (function () {
                    var d = document, s = d.createElement('script');
                    s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
                    s.setAttribute('data-timestamp', +new Date());
                    (d.head || d.body).appendChild(s);
                  })();
                </script>
            </section>
            --}}

  </article>

  </div>
</main>

{{!-- Links to Previous/Next posts --}}
<aside class="read-next outer">
  <div class="inner">
    <div class="read-next-feed">
      {{#if primary_tag}}
      {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
      {{#if related_posts}}
      <article class="read-next-card" {{#if ../primary_tag.feature_image}}
        style="background-image: url({{../primary_tag.feature_image}})" {{else}} {{#if @blog.cover_image}}
        style="background-image: url({{@blog.cover_image}})" {{/if}} {{/if}}>
        <header class="read-next-card-header">
          <small class="read-next-card-header-sitetitle">&mdash; {{@blog.title}} &mdash;</small>
          {{#../primary_tag}}
          <h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>
          {{/../primary_tag}}
        </header>
        <div class="read-next-divider">{{> "icons/infinity"}}</div>
        <div class="read-next-card-content">
          <ul>
            {{#foreach related_posts}}
            <li><a href="{{url}}">{{title}}</a></li>
            {{/foreach}}
          </ul>
        </div>
        <footer class="read-next-card-footer">
          <a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}}
            →</a>
        </footer>
      </article>
      {{/if}}
      {{/get}}
      {{/if}}

      {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
      {{#next_post}}
      {{> "post-card"}}
      {{/next_post}}

      {{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
      {{#prev_post}}
      {{> "post-card"}}
      {{/prev_post}}

    </div>
  </div>

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- footer ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6329206778297580"
     data-ad-slot="7369253787"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

</aside>


{{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}}
{{> floating-header}}

{{/post}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script type="text/javascript" src="{{asset "js/lightbox/lightbox.js"}}"></script>
<script>

  // NOTE: Scroll performance is poor in Safari
  // - this appears to be due to the events firing much more slowly in Safari.
  //   Dropping the scroll event and using only a raf loop results in smoother
  //   scrolling but continuous processing even when not scrolling
  $(document).ready(function () {
    // Start fitVids
    var $postContent = $(".post-full-content");
    $postContent.fitVids();
    // End fitVids

    var progressBar = document.querySelector('progress');
    var header = document.querySelector('.floating-header');
    var title = document.querySelector('.post-full-title');

    var lastScrollY = window.scrollY;
    var lastWindowHeight = window.innerHeight;
    var lastDocumentHeight = $(document).height();
    var ticking = false;

    function onScroll() {
      lastScrollY = window.scrollY;
      requestTick();
    }

    function onResize() {
      lastWindowHeight = window.innerHeight;
      lastDocumentHeight = $(document).height();
      requestTick();
    }

    function requestTick() {
      if (!ticking) {
        requestAnimationFrame(update);
      }
      ticking = true;
    }

    function update() {
      var trigger = title.getBoundingClientRect().top + window.scrollY;
      var triggerOffset = title.offsetHeight + 35;
      var progressMax = lastDocumentHeight - lastWindowHeight;

      // show/hide floating header
      if (lastScrollY >= trigger + triggerOffset) {
        header.classList.add('floating-active');
      } else {
        header.classList.remove('floating-active');
      }

      progressBar.setAttribute('max', progressMax);
      progressBar.setAttribute('value', lastScrollY);

      ticking = false;
    }

    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize, false);

    update();
  });
</script>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'https://discourse.opengenus.org/',
    discourseEmbedUrl: 'http://iq.opengenus.org{{url}}'
  };

  (function () {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

{{!-show/hide tags   if they excceed one line--}}
<script DOCTYPE="text/javascript">

  //in-page links and table of contents
  $('.in_page_link').click(function () {
    event.preventDefault()

    //scroll to the href of the link
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 500);
    return false;

  });

  $(document).ready(function () {

    var taglist_height = $('#taglist').height();
    var tag_height = $('#tag_element').height();
    var q_message = document.createElement('h6');


    if (taglist_height >= 35) {
      $("#more").show();
    }

    $('#more').click(function () {

      $('#text').removeClass("less");
      $("#less").show();
      $(this).hide();
    });

    $('#less').click(function () {
      $('#text').addClass("less");
      $(this).hide();
      $("#more").show();
    });

    //Add icon and colors to question answers
    //click function will be shown if the question is answered correctly
    $('.correct_option').click(function () {

      var icon_check = '<i class="fa fa-check fadeMe" style="margin:5px;color:#33cc33;"></i>';
      var icon_cross = '<i class="fa fa-times fadeMe" style="margin:5px;"></i>';

      if ($(this).children().length < 1) {
        $(this).siblings().children().remove();
        $(this).siblings().prepend(icon_cross);
        $(this).siblings().css({ "color": "coral", "border-color": "coral" });


        $(this).addClass("correct_answer");
        $(this).prepend(icon_check);
        q_message.innerHTML = ("Well done, you are the best.");
        q_message.classList.add("question_message");
        q_message.style.color = "MediumSeaGreen";
        $(this).parents(':eq(0)').prepend(q_message);

        // Show the answer explanation

        if ($(this).parent().siblings(".Answer_explanation").length >= 1) {
          $(this).parent().siblings(".Answer_explanation").css({ "display": "block" });

        }

      }
      $(this).attr('disabled', 'disabled');
    });


    //click function will   show the message if the question is answered incorrectly

    $('.wrong_option').click(function () {
      var icon = '<i class="fa fa-times fadeMe" style="margin:5px;"></i>';

      if ($(this).children().length < 1) {
        $(this).addClass("wrong_answer");

        $(this).prepend(icon);
        q_message.innerHTML = ("No worries, this answer is wrong, you must try again");
        q_message.classList.add("question_message");
        q_message.style.color = "coral";
        $(this).parents(':eq(0)').prepend(q_message);
      }

    });

  })

  //shuffle question
  function shuffle(arra1) {
    var ctr = arra1.length, temp, index;

    // While there are elements in the array
    while (ctr > 0) {
      // Pick a random index

      index = Math.floor(Math.random() * ctr);
      // Decrease ctr by 1
      ctr--;
      // And swap the last element with it

      temp = arra1[ctr];
      arra1[ctr] = arra1[index];
      arra1[index] = temp;
    }
    return arra1;
  }

  //get the options
  var questions = document.getElementsByClassName("questionlist");

  // shuffle the elements , and remove options if they are more than 4
  for (c = 0; c <= questions.length; c++) {

    var index;
    var ctr2 = questions[c].children.length;
    var index;

    while (ctr2 > 4) {
      index = Math.floor(Math.random() * ctr2);
      if (index != 0) {
        questions[c].children[index].remove();

        ctr2--;
      }
    }

    var myArray = [1, 2, 3, 4];

    shuffle(myArray);

    for (i = 0; i <= 3; i++) {
      questions[c].children[i].style.order = myArray[i];
      questions[c].children[i].style.display = "block";
    }
  }

</script>

<style>
a#referencelink {
   display: block; 
   cursor:pointer; 
   background:rgb(181, 222, 250); 
   padding-top:20px; 
   padding-bottom:20px; 
   width:100%; 
   text-align:center; 
   font-size: 20px; 
   color: black;
}
</style>

{{/contentFor}}