+ This web app was made using the Bootstrap CSS framework. Most CSS components, browser elements, and JavaScript code should be compatible with most contemporary browsers. This version of the quiz reduces its use of JavaScript to process and evaluate results, and uses JavaScript for animations and other effects in the interface. So it should be compatible more widely. +
++ If you notice any incompatibilities or strange browser behaviour, please let me know and I'll try and see how I can fix it. +
+ ++ Bootstrap as a CSS web design framework is built with a lot of accessibility features and guidance in mind, and the supporting documentation gave some guidance on what fields and metadata to populate to make page elements accessible to screen readers. I used the existing Bootstrap CSS classes and templates, and followed most existing guidance to enter metadata for html elements. This should hopefully facilitate screen readers being able to parse the page effectively. If there are any issues with this, let me know and I can make sure the page is structured in a way that is screen reader friendly. +
++ Besides that, the colour schemes and fonts have been the standard fonts to ensure that they are legible and familiar. All links are also navigable by the keyboard alone, and this should make it a lot easier to interact with the quiz (especially when having to answer several questions). +
++ Admittedly, this quiz is rather long. There are a lot of questions to answer. Although not all questions are mandatory, and a user need not fill in all answers in order to proceed. +
++ Because of how I re-structured this to be a web app running on the server, the way in which I host this site has changed considerably. There may be issues with how the various ports forward to each other on the server. I will monitor this. If there are any problems with accessing this, let me know and I will try to fix it. +
+{% endblock %} \ No newline at end of file diff --git a/interface/templates/dev.html b/interface/templates/dev.html new file mode 100644 index 0000000..7d94f8c --- /dev/null +++ b/interface/templates/dev.html @@ -0,0 +1,23 @@ +{% extends "base.html" %} +{% block title %} Development {% endblock %} +{% block content %} ++ 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. +
++ 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. +
++ 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. +
++ 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. +
++ 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. +
++ In addition, this is the first time I am storing the code of the quiz on my Git repo, and having a much more streamlined version control process. +
+{% endblock %} \ No newline at end of file diff --git a/interface/templates/home.html b/interface/templates/home.html new file mode 100644 index 0000000..018a681 --- /dev/null +++ b/interface/templates/home.html @@ -0,0 +1,35 @@ +{% extends "base.html" %} +{% block title %} Home | Which Masks Playbook Are You? — a Personality Quiz {% endblock %} +{% block content %} ++ This is a personality quiz to determine which playbook you are in the Masks: a New Generation table-top role-playing game. There are several personality quizzes out there for D&D, and this one by Easydamus in particular inspired me. I thought it would be fun to make something similar for Masks as it is my favourite TRPG (more on that in the appropriate section). +
++ I began this project as a way of learning how to programme. I started with a farily rudimentary version of this quiz using JavaScript and html. The way that quiz worked was that it was processed on the client side, as the quiz logic was downloaded onto a browser and the scripts were run there. I had contemplated re-making the quiz using a server-side framework eventually, and in this version I taught myself how to make the quiz run on a server instead. I taught myself Python, Flask, and some rudimentary Jinja to make this. +
++ If you want to take the quiz, you can do so here: + Take the Quiz +
+ ++ A table-top role-playing game is a collaborative story-telling game in which a group of players work together to tell a story, with a framework of rules that govern how players share narrative control and resolve uncertain outcomes. +
++ The most famous TRPG is Dungeons & Dragons, currently published by Wizards of the Coast. For decades, it has defined what this hobby has been perceived as becuase it is the most widely-played TRPG in the world and, as a consequence, is also most frequently referenced in pop culture. There are many other games out there — with different rulesets, settings, artwork, feel, and narrative purpose — coverying myriad genres of storytelling like fantasy, action, adventure, horror, sci-fi, cyberpunk, et cetera. Each of these games is referred to in the community as a game system. +
++ Masks is another such role-playing game. Its specific hook is that it is about teenage superheroes who are juggling the emotional pressures of being a teenager with their awesome adventures of fighting villains. You can read more about Masks particularly in the relevant section. +
++ The way these games work is players usually play characters through which they interact with the fictional world. These characters usually fall into a number of different archetypes depending on the system. The most common archetypes, or 'character classes', are from fantasy games like D&D, like the Fighter, Wizard, Rogue, or Cleric. These classes in D&D are determined by the various roles in a fantasy adventuring party that the characters play (with some loose narrative flavour around how their class is their calling in life). These archetypes also have some flavour text around common personality traits or tropes about them. +
++ In Masks, the archetypes, referred to as 'playbooks', are all about being teenagers and getting up to teenage shenanigans. The archetypes are all determined by the personalities that the characters have. There are about 20 different archetypes to choose from, so naturally it can be really difficult to choose the one most suitable. So, I designed a personality quiz to help choose the best character archetype! +
+{% endblock %} \ No newline at end of file diff --git a/interface/templates/masks.html b/interface/templates/masks.html new file mode 100644 index 0000000..1d2aca4 --- /dev/null +++ b/interface/templates/masks.html @@ -0,0 +1,11 @@ +{% extends "base.html" %} +{% block title %} About Masks {% endblock %} +{% block content %} +Masks 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 Apocalypse World 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.
+If you imagine all table-top role-playing games to exist on a spectrum between chess and improv theatre with D&D fifth edition right in the middle, PbtA games are much closes to the improv theatre side of the axis, whereas traditional games, while fourth edition D&D would be closer to chess because of its wargame heritage.
+Masks is without a doubt my favourite role-playing game system, and I would strongly recommend trying it to anyone who hasn't played TRPGs before, or hasn't played Masks before. What I like most about Masks is its concept of playing teenage superheroes, and all the emotional drama and angst that that entails. For me, it has been so much fun to revisit a difficult age but from a perspective of greater maturity and in a setting where the very differences that I had been victimised for are framed not as liabilities but as superpowers: things that made characters special. This was an age when I really loved reading comic books, and that is why revisiting it with this zany aesthetic is such a delight.
+The names of the playbooks, as well as their associated flavour text, are by Brendan Conway, taken from the player sheets that are part of the game documents made freely-available on-line.
+Special thanks to the members of the Masks Discord for their advice, feedback, and patience with the original quirks of the web hosting.
+{% endblock %} \ No newline at end of file diff --git a/interface/templates/navbar.html b/interface/templates/navbar.html new file mode 100644 index 0000000..935d629 --- /dev/null +++ b/interface/templates/navbar.html @@ -0,0 +1,52 @@ + \ No newline at end of file diff --git a/interface/templates/quiz.html b/interface/templates/quiz.html new file mode 100644 index 0000000..f1901cb --- /dev/null +++ b/interface/templates/quiz.html @@ -0,0 +1,82 @@ +{% extends "base.html" %} +{% block title %} Take the Quiz {% endblock %} +{% block content %} ++ Please answer the following {{ questions|length }} questions. None of the questions are mandatory, and you can skip questions you are unsure of or do not want to answer. But you cannot leave the quiz blank. The more questions you answer, the better results you will get. +
+ ++ You will also be able to select which source books you would like to see results from. You can exclude source books to narrow down the range of playbooks, or add all of them to have a full range of playboosk to choose from. +
+ + +{% endblock %} \ No newline at end of file diff --git a/interface/templates/results.html b/interface/templates/results.html new file mode 100644 index 0000000..8d56d48 --- /dev/null +++ b/interface/templates/results.html @@ -0,0 +1,153 @@ +{% extends "base.html" %} +{% block title %} Your Results {% endblock %} +{% block content %} ++ {{ playbooks[playbook]['flavour']|safe }} +
+ {% set source = sources[playbooks[playbook]['source']] %} +From the {{ source['title'] }} {{ source['type'] }} by {{ source['author'] }}, published by {{ source['publisher'] }} in {{ source['year'] }}.
++ Moment of Truth: {{ playbooks[playbook]['moment']|safe }} +
+
+ Labels:
+
| + {{ label[0]|upper}}{{ label[1:]}}: + | ++ {{ results['selected_playbooks'][playbook][label] }} + | +
+ This chart represents how many points you got for each playbook from the source books you selected in all the questions you answered. +
+ +| + {{ loop.index }}. + | ++ The {{ playbook[0]|upper }}{{ playbook[1:] }} + | ++ {{ (results['playbooks'][playbook]*100/results['max_score'])|round(0) }}% + | ++ {% for i in range( (results['playbooks'][playbook]*20/results['max_score'])|round(0, 'ceil')|int) -%}X{% endfor %} + ({{ results['playbooks'][playbook] }}) + | +
| + Danger + | ++ {{ labels['danger']['flavour'] }} + {{ results['display_labels'].remove('danger') if results['display_labels'].remove('danger') is not none else '' }} + | +
| + Freak + | ++ {{ labels['freak']['flavour'] }} + {{ results['display_labels'].remove('freak') if results['display_labels'].remove('freak') is not none else '' }} + | +
| + Saviour + | ++ {{ labels['saviour']['flavour'] }} + {{ results['display_labels'].remove('saviour') if results['display_labels'].remove('saviour') is not none else '' }} + | +
| + Superior + | ++ {{ labels['superior']['flavour'] }} + {{ results['display_labels'].remove('superior') if results['display_labels'].remove('superior') is not none else '' }} + | +
| + Mundane + | ++ {{ labels['mundane']['flavour'] }} + {{ results['display_labels'].remove('mundane') if results['display_labels'].remove('mundane') is not none else '' }} + | +
| + {{ label[0]|upper }}{{ label[1:] }} + | ++ {{ labels[label]['flavour'] }} + {{ results['display_labels'].remove(label) if results['display_labels'].remove(label) is not none else '' }} + | +
+ In Masks, your Moment of Truth is a defining moment in your character’s life when you are in the spotlight. All eyes are on you, and it is when you prove who you really are. For a moment, you grow into the best version of yourself and you show to everyone who you really are. +
++ What this means mechanically is that, for one scene, you get to narrate what happens as per the script of your moment of truth. You take down a powerful threat, harness unbelievable power, or prove yourself to everyone watching. And then, it locks one of your Labels. That Label can no longer shift. +
+ +