viveksantayana/masks-personality-quiz
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Bug fixes for dynamic meta tags

Browse Source
This commit is contained in:
Vivek Santayana 2021-11-03 12:37:18 +00:00
parent 7747b2a402
commit aca2074ed6
12 changed files with 110 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
interface/error_handlers.py
View File

@ -1,7 +1,12 @@
from flask import render_template, Blueprint, request from flask import render_template, Blueprint, request
from .site_info import site_meta, page_info
error_handler = Blueprint('error_handlers', __name__) error_handler = Blueprint('error_handlers', __name__)
@error_handler.app_errorhandler(404) @error_handler.app_errorhandler(404)
def not_found(e): def not_found(e):
return render_template("404.html") return render_template(
"404.html",
site_meta = site_meta,
page_info = page_info['404']
)

40
interface/site_info.py Normal file
View File

@ -0,0 +1,40 @@
site_meta = {
'title': 'Which Masks Playbook Are You? — a Personality Quiz',
'name': 'Masks Personality Quiz | V.S.',
'description': 'A personality quiz to find out which Masks playbook you are.',
'locale': 'en_GB',
'theme_colour': '#343a40'
}
page_info = {
'home': {
'url': '/',
'template': 'home.html',
'title': 'Home'
},
'compatibility': {
'url': '/compatibility',
'template': 'compatibility.html',
'title': 'Compatibility and Accessibility'
},
'masks': {
'url': '/masks',
'template': 'masks.html',
'title': 'About Masks'
},
'quiz': {
'url': '/quiz',
'template': 'quiz.html',
'title': 'Take the Quiz'
},
'results': {
'url': '/results',
'template': 'results.html',
'title': 'Your Results'
},
'404': {
'url': '/',
'template': '404.html',
'title': 'Page Not Found'
},
}

23
interface/templates/404.html
View File

@ -1,11 +1,28 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %} Page Not Found {% endblock %} {% block meta %}
<meta name="description" content="{{ site_meta['description']|safe }}" />
<meta property="og:locale" content="{{ site_meta['locale']|safe }}" />
<meta property="og:type" content="website" />
<meta property="og:description" content="{{ site_meta['description']|safe }}" />
<meta property="og:site_name" content="{{ site_meta['name']|safe }}" />
<meta property="og:title" content="{{ page_info['title'] }} | {{ site_meta['name']|safe }}" />
<meta property="og:image" content="https://masks.vsnt.uk{{ url_for('static', filename='favicon.png') }}" />
<meta property="og:image:alt" content="Logo of the Masks Personality Quiz" />
<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="1024" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="{{ page_info['title'] }} | {{ site_meta['name']|safe }}" />
<meta name="twitter:description" content="{{ site_meta['description']|safe }}" />
<meta name="twitter:image" content="https://masks.vsnt.uk{{ url_for('static', filename='favicon.png') }}" />
<meta name="twitter:image:alt" content="Logo of the Masks Personality Quiz" />
<meta name="twitter:creator" content="@viveksantayana" />
<meta name="twitter:site" content="@viveksantayana" />
<meta name="theme-color" content="#343a40" />
{% endblock %}
{% block content %} {% block content %}
<h1>Error: Page Not Found</h1> <h1>Error: Page Not Found</h1>
<div class="container"> <div class="container">
<a href="/">Return to the Home Page</a> <a href="/">Return to the Home Page</a>
</div> </div>
{% endblock %} {% endblock %}

6
interface/templates/base.html
View File

@ -23,9 +23,11 @@
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='favicon.png') }}"> <link rel="apple-touch-icon" href="{{ url_for('static', filename='favicon.png') }}">
<title> <title>
{% block title %}{% endblock %} | Which Masks Playbook Are You? &mdash; a Personality Quiz {{ page_info['title']|safe }} | {{ site_meta['title']|safe }}
</title> </title>
{% include "og-meta.html" %} {% block meta %}
{% include "og-meta.html" %}
{% endblock %}
</head> </head>
<body> <body>

1
interface/templates/compatibility.html
View File

@ -1,5 +1,4 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %} Compatibility and Accessibility {% endblock %}
{% block content %} {% block content %}
<h1>Compatibility and Accessibility</h1> <h1>Compatibility and Accessibility</h1>

23
interface/templates/dev.html
View File

@ -1,23 +0,0 @@
{% extends "base.html" %}
{% block title %} Development {% endblock %}
{% block content %}
<h1>Development</h1>
<p>
I started work on the first version of this personality quiz over a year ago, when I decided to teach myself programming. The original version ran on JavaScript and was rendered and evaluated entirely by the browser. This version runs entirely on the server, and the quiz results are evaluated by the server rather than the client.
</p>
<p>
The back-end runs on Python 3.10, using the Flask framework. The web pages are templated using Jinja. The web site is rendered using html and the Bootstrap CSS framework. There have been some elements of the interface enhanced using rudimentary JavaScript, including the jQuery library. Of all of these programming languages, Python has proved to be a far more intuitive language to learn, and generally programming this has been a lot more enjoyable and a lot less frustrating than the earlier iteration that used JavaScript.
</p>
<p>
The quiz runs by rendering a form with all of the questions and options on the browser. The browser then submits the responses via a POST request to the server. The server evaluates the responses and renders the results accordingly. There is no information stored on the client.
</p>
<p>
All data transacted between the client and the server is stored as a Flask session for the duration that the user is on the web site. If the user closes the site, the session data is deleted and all answers submitted are lost.
</p>
<p>
There are, of course, some considerable inefficiencies in the way I have set up the templating. I have written the text for all the various web pages in the templates of the respective pages. Ideally, I would have preferred having a single template for all of the web pages or views, and then have the content served on those pages render dynamically based on the URL query. But that was a level of programming that was gratuitous at this point, as really most of the pages were serving static content anyway so it did not matter just now.
</p>
<p>
In addition, this is the first time I am storing the code of the quiz <a href="" title="Link to the code on my Git Repo">on my Git repo</a>, and having a much more streamlined version control process.
</p>
{% endblock %}

3
interface/templates/home.html
View File

@ -1,7 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %} Home | Which Masks Playbook Are You? &mdash; a Personality Quiz {% endblock %}
{% block content %} {% block content %}
<h1>Home page</h1> <h1>Home Page</h1>
<h3 class="section-head">Background</h3> <h3 class="section-head">Background</h3>

1
interface/templates/masks.html
View File

@ -1,5 +1,4 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %} About Masks {% endblock %}
{% block content %} {% block content %}
<h1>About <em>Masks</em></h1> <h1>About <em>Masks</em></h1>
<p><em>Masks</em> is a game by Brendan Conway using the Powered by the Apocalypse engine. For those unfamiliar with the term, Powered by the Apocalypse is a category of game systems that are based on the overall structure of the <em>Apocalypse World</em> system by Vincent and Meguey Baker. The core concept behind this system is to encourage collaborate and improvisational story-telling by streamlining the mechanics. This is in sharp contrast to traditional TRPGs that have very granular rules and hierarchical authority between a Game Master and the players.</p> <p><em>Masks</em> is a game by Brendan Conway using the Powered by the Apocalypse engine. For those unfamiliar with the term, Powered by the Apocalypse is a category of game systems that are based on the overall structure of the <em>Apocalypse World</em> system by Vincent and Meguey Baker. The core concept behind this system is to encourage collaborate and improvisational story-telling by streamlining the mechanics. This is in sharp contrast to traditional TRPGs that have very granular rules and hierarchical authority between a Game Master and the players.</p>

13
interface/templates/og-meta.html
View File

@ -1,16 +1,17 @@
<meta name="description" content="A personality quiz to find out which Masks playbook you are." /> <meta name="description" content="{{ site_meta['description']|safe }}" />
<meta property="og:locale" content="en_UK" /> <meta property="og:locale" content="{{ site_meta['locale']|safe }}" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:description" content="A personality quiz to find out which Masks playbook you are." /> <meta property="og:description" content="{{ site_meta['description']|safe }}" />
<meta property="og:url" content="https://masks.vsnt.uk{{ url_for(request.endpoint, **request.view_args) }}" /> <meta property="og:url" content="https://masks.vsnt.uk{{ url_for(request.endpoint, **request.view_args) }}" />
<meta property="og:site_name" content="Masks Personality Quiz | V.S." /> <meta property="og:site_name" content="{{ site_meta['name']|safe }}" />
<meta property="og:title" content="{{ page_info['title'] }} | {{ site_meta['title']|safe }}" />
<meta property="og:image" content="https://masks.vsnt.uk{{ url_for('static', filename='favicon.png') }}" /> <meta property="og:image" content="https://masks.vsnt.uk{{ url_for('static', filename='favicon.png') }}" />
<meta property="og:image:alt" content="Logo of the Masks Personality Quiz" /> <meta property="og:image:alt" content="Logo of the Masks Personality Quiz" />
<meta property="og:image:width" content="1024" /> <meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="1024" /> <meta property="og:image:height" content="1024" />
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Which Masks Playbook Are You?" /> <meta name="twitter:title" content="{{ page_info['title'] }} | {{ site_meta['title']|safe }}" />
<meta name="twitter:description" content="A personality quiz to find out which Masks playbook you are." /> <meta name="twitter:description" content="{{ site_meta['description']|safe }}" />
<meta name="twitter:image" content="https://masks.vsnt.uk{{ url_for('static', filename='favicon.png') }}" /> <meta name="twitter:image" content="https://masks.vsnt.uk{{ url_for('static', filename='favicon.png') }}" />
<meta name="twitter:image:alt" content="Logo of the Masks Personality Quiz" /> <meta name="twitter:image:alt" content="Logo of the Masks Personality Quiz" />
<meta name="twitter:creator" content="@viveksantayana" /> <meta name="twitter:creator" content="@viveksantayana" />

1
interface/templates/quiz.html
View File

@ -1,5 +1,4 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %} Take the Quiz {% endblock %}
{% block content %} {% block content %}
<h1>Take the Quiz</h1> <h1>Take the Quiz</h1>

1
interface/templates/results.html
View File

@ -1,5 +1,4 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %} Your Results {% endblock %}
{% block content %} {% block content %}
<h1>Your Results</h1> <h1>Your Results</h1>
<a name="top-anchor"></a> <a name="top-anchor"></a>

37
interface/views.py
View File

@ -6,20 +6,33 @@ from data.questions import questions
from data.sources import sources from data.sources import sources
from quiz.validators import validate_submissions from quiz.validators import validate_submissions
from quiz.evaluation import evaluate_quiz from quiz.evaluation import evaluate_quiz
from .site_info import site_meta, page_info
views = Blueprint('views', __name__) views = Blueprint('views', __name__)
@views.route('/compatibility') @views.route('/compatibility')
def compatibility(): def compatibility():
return render_template('compatibility.html') return render_template(
'compatibility.html',
site_meta = site_meta,
page_info = page_info['compatibility']
)
@views.route('/') @views.route('/')
def home(): def home():
return render_template('home.html') return render_template(
'home.html',
site_meta = site_meta,
page_info = page_info['home']
)
@views.route('/masks') @views.route('/masks')
def about(): def about():
return render_template('masks.html') return render_template(
'masks.html',
site_meta = site_meta,
page_info = page_info['masks']
)
@views.route('/quiz', methods=['GET', 'POST']) @views.route('/quiz', methods=['GET', 'POST'])
def quiz(): def quiz():
@ -27,14 +40,28 @@ def quiz():
session['submission'] = request.form session['submission'] = request.form
if validate_submissions(session['submission']): if validate_submissions(session['submission']):
return redirect(url_for('views.results')) return redirect(url_for('views.results'))
return render_template('quiz.html', questions=questions, sources=sources) return render_template(
'quiz.html',
site_meta = site_meta,
page_info = page_info['quiz'],
questions=questions,
sources=sources
)
@views.route('/results') @views.route('/results')
def results(): def results():
if 'submission' not in session: if 'submission' not in session:
return redirect(url_for('views.quiz')) return redirect(url_for('views.quiz'))
results = evaluate_quiz(session['submission']) results = evaluate_quiz(session['submission'])
return render_template('results.html', results = results, playbooks = playbooks, labels = labels, sources = sources) return render_template(
'results.html',
site_meta = site_meta,
page_info = page_info['results'],
results = results,
playbooks = playbooks,
labels = labels,
sources = sources
)
@views.route('/reset') @views.route('/reset')
def reset(): def reset():