Django vs Flask Worksheet from https://wakatime.com/django-vs-flask-worksheet

django-vs-flask-worksheet.html

{% extends "common/base.html" %}
{% block subtitle %}Django vs Flask Worksheet{% endblock %}

{% block css %}
  {% compress 'css' %}
    <link href="{{STATIC_URL}}libs/fullpage.js/jquery.fullPage.css" rel="stylesheet" type="text/css">
    <link href="{{STATIC_URL}}css/django-vs-flask-worksheet.less" rel="stylesheet" type="text/less">
  {% endcompress %}
{% endblock %}

{% block content %}
  <div id="fullpage">
    <div class="section">
      <div class="m-bottom-xs-160 center-xs">
        <div id="result-winner"><span class="title">You should use: </span><span class="value">[FINISH QUESTIONS FOR RESULT]</span></div>
        <div id="result-totals"><div class="title">Totals</div><div class="value"></div></div>
        <div class="m-top-xs-40">
          <span class="m-right-sm-30">
            <iframe src="//platform.twitter.com/widgets/tweet_button.1384994725.html#_=377230709693470&count=horizontal&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Fwakatime.com%2Fdjango-vs-flask-worksheet%2F&size=m&text=Can%27t%20decide%20between%20Django%20or%20Flask%3F%20This%20worksheet%20shows%20you%20how.&url=https%3A%2F%2Fwakatime.com%2Fdjango-vs-flask-worksheet%2F&via=WakaTime"
            allowtransparency="true" frameborder="0" scrolling="no"
            style="width:100px; height:20px;">
            </iframe>
          </span>
          <span>
            <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwakatime.com%2Fdjango-vs-flask-worksheet%2F&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=672782146122594" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:90px;" allowTransparency="true"></iframe>
          </span>
        </div>
        <div class="m-top-xs-40">
          Read more about <a href="https://wakatime.com/blog/25-pirates-use-flask-the-navy-uses-django">Django vs Flask</a>.
        </div>
      </div>
    </div>
  </div>

{% raw %}
  <script id="section-template" type="x-tmpl-mustache">
    <div class="section">
      <div class="m-bottom-xs-160 center-xs">
        <div class="container-fluid">
          <div class="row">
            <div class="col-xs-5 col-xs-offset-2 right-xs">
              <div class="row">
                <div class="col-xs-12">
                  <div class="question">{{question}}</div>
                </div>
                <div class="col-xs-12">
                  <div class="description">{{{description}}}</div>
                </div>
              </div>
            </div>
            <div class="col-xs-4 left-xs">
              <span class="answer yes btn btn-default btn-lg">YES</span>
              <span class="answer no btn btn-default btn-lg">NO</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </script>
{% endraw %}

{% endblock %}

{% block javascript %}
  {% compress 'js' %}
  <script src="{{ STATIC_URL }}libs/fullpage.js/jquery.fullPage.js"></script>
  <script src="{{ STATIC_URL }}js/django-vs-flask-worksheet.js"></script>
  {% endcompress %}
{% endblock %}

django-vs-flask-worksheet.js

$(function() {

  var scores = {};
  var questions = [
    {
      question: "Have you been coding for more than 5 years?",
      description: "Even though Flask is easier to get started than Django, it doesn't hold your hand through the whole process. Django on the other hand has guides for everything.",
      yes: 'Flask',
      no: 'Django',
    },
    {
      question: "Have you coded in Python for more than 3 years?",
      description: "Flask is so easy to get started, you don't even need to know Python to make your first website. Using Flask is actually a great way to learn Python.",
      yes: 'Django',
      no: 'Flask',
    },
    {
      question: "Do you like reading Python code? (vs reading docs)",
      description: "Have a few hours? Grab a coffee and read the Flask source code. It's micro so you can actually read the whole source in one sitting.",
      yes: 'Flask',
      no: 'Django',
    },
    {
      question: "Will you have an API?",
      description: "Flask > Django for APIs. For example, a nested api resource in Flask is <code>@app.route('/users/&lt;string:user_id&gt;/teams/&lt;string:team_id&gt;', methods=['GET', 'POST'])</code> while with Django REST framework this is impossible. (<a href=\"https://github.com/alanjds/drf-nested-routers\" target=\"_blank\">drf-nested-routers</a> helps but breaks unless you use only the most basic Django REST framework features.",
      yes: 'Flask',
      no: 'Django',
    },
    {
      question: "Will your site primarily have dynamic HTML pages?",
      description: "This is the opposite of an API heavy site. Django makes building HTML websites easier.",
      yes: 'Django',
      no: 'Flask',
    },
    {
      question: "Will you use Service Oriented Architecture (SOA)?",
      description: "Because of it's micro principles, Flask is easier to use with SOA than Django.",
      yes: 'Flask',
      no: 'Django',
    },
    {
      question: "Using an SQL database?",
      description: "Complicated SQL queries are a piece of cake with Django's built-in ORM. Most people use SQLAlchemy with Flask, which is powerful but not as easy to use as Django's ORM.",
      yes: 'Django',
      no: 'Flask',
    },
    {
      question: "Want new devs to already know your conventions?",
      description: "New devs joining your team will already know how to code the Django way. Flask is more flexible, which leads to larger variance in conventions.",
      yes: 'Django',
      no: 'Flask',
    },
  ];

  // Render questions and add to page
  var template = $('#section-template').html();
  _.each(_.clone(questions).reverse(), function(question) {
    $('#fullpage').prepend(Mustache.render(template, question));
  });

  $('#fullpage').fullpage({

    //Navigation
    navigation: true,
    navigationPosition: 'right',

    //Scrolling
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    touchSensitivity: 15,
    normalScrollElementTouchThreshold: 5,

    //Accessibility
    keyboardScrolling: false,
    animateAnchor: true,
    recordHistory: true,

    //Design
    controlArrows: true,
    verticalCentered: true,
    sectionsColor: ['#D5FFD4', '#F1C2FF', '#FFED98', '#FFBF7C', '#BCF6AC', '#F9E4B6', '#61B9FF', '#D5FFD4'],
    paddingTop: '0px',

    //events
    onLeave: function(index, nextIndex, direction){},
    afterLoad: function(anchorLink, index){},
    afterRender: function(){},
    afterResize: function(){},
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
    onSlideLeave: function(anchorLink, index, slideIndex, direction){},
  });

  // Disable scrolling
  $.fn.fullpage.setAllowScrolling(false);

  $('#fullpage').find('.answer').on('click', function(e) {
    e && e.preventDefault();

    var choice = $(e.target).hasClass('yes') ? 'yes' : 'no';
    var index = 0;
    var found = false;
    $('#fullpage .section').each(function() {
      if ($.contains(this, e.target)) found = true;
      if (!found) index += 1;
    });

    scores[index] = questions[index][choice];

    if (index + 1 == questions.length) {

      // Answered all questions, now show result
      var winners = {};
      _.each(scores, function(choice) {
        if (!winners[choice]) winners[choice] = 0;
        winners[choice] += 1;
      });

      var tie = false;
      var winner = undefined;
      _.each(winners, function(score, choice) {
        if (winner && winners[winner] == score) {
          winner = 'It\'s a tie! Read about <a href="https://wakatime.com/blog/25-pirates-use-flask-the-navy-uses-django">Django vs Flask</a> to make your own choice.';
          tie = true;
        } else if (!winner || winners[winner] < score) {
          winner = choice;
        }
      });

      var $totals = $('<div />');
      _.each(winners, function(score, choice) {
        var $html = '<div>' + choice + ': ' + score + '</div>';
        $totals.append($html);
      });

      $('#result-winner .value').html(winner);
      $('#result-totals .value').html($totals);
      if (tie) {
        $('#result-winner .title').remove();
      }

    }

    // Scroll down to next section
    $.fn.fullpage.moveSectionDown();

  });
});

django-vs-flask-worksheet.less

.navbar {
  margin-bottom: 0px;
}
.question {
  font-size: 24px;
  font-weight: 700;
}
.description {
  font-size: 17px;
  font-weight: normal;
  color: #555459;
  code {
    font-size: 12px;
  }
}
.answer {
  margin-right: 16px;
  cursor: pointer;
}
#result-winner {
  margin-bottom: 20px;
  .title {
    font-weight: bold;
    font-size: 36px;
  }
  .value {
    font-size: 36px;
  }
}
#result-totals {
  .title {
    font-weight: bold;
    font-size: 24px;
  }
  .value {
    font-size: 24px;
  }
}
#fullpage {
  top: -10px;
}