Finished the web site.
Need to now set up the quiz interface and API calls.
This commit is contained in:
parent
c69f471b25
commit
03c6deb8c7
0
client/src/assets/js/quiz.js
Normal file
0
client/src/assets/js/quiz.js
Normal file
@ -7,7 +7,6 @@
|
||||
name: 'Navbar',
|
||||
components: {
|
||||
mdiMenu,
|
||||
MobileLink,
|
||||
Navlink,
|
||||
Menu,
|
||||
MenuButton,
|
||||
|
||||
@ -2,6 +2,7 @@ import { createApp } from 'vue'
|
||||
import '@/style.css'
|
||||
import App from '@/App.vue'
|
||||
import Router from '@/router'
|
||||
import '@/assets/js/quiz.js'
|
||||
const app = createApp(App)
|
||||
app.use(Router)
|
||||
app.mount('#app')
|
||||
|
||||
@ -72,7 +72,7 @@ const routes = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'https://git.vsnt.uk/',
|
||||
path: 'https://git.vsnt.uk/viveksantayana/wanderhome-quiz',
|
||||
name: 'SourceCode',
|
||||
meta: {
|
||||
index: 3,
|
||||
|
||||
@ -14,33 +14,82 @@
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<article class="prose mx-auto">
|
||||
<h2>Why I Made This</h2>
|
||||
<h2>What Exactly Is This?</h2>
|
||||
<p>
|
||||
Teaching myself programming.
|
||||
This web app is a personality quiz to see what <em class="uncial-antiqua">Wanderhome</em> playbook you are.
|
||||
I have previously made a smilar <a href="https://masks.vsnt.uk/" target="_blank" rel="noopener noreferrer">character quiz for Brendan Conway’s <em>Masks: a New Generation</em></a>.
|
||||
I have also made a digital version of the <a href="https://reftest.vsnt.uk/" target="_blank" rel="noopener noreferrer">Scottish Korfball refereeing exam</a>.
|
||||
</p>
|
||||
<p>
|
||||
This was a fun programming exercise I set myself.
|
||||
But quizzes like this are also really enjoyable to do, and not to mention compare our results with others.
|
||||
And I would love to make this quiz if it gives me a reason to talk to people I know about my favourite TTRPGs.
|
||||
</p>
|
||||
<p>
|
||||
If you want to read more about <em class="uncial-antiqua">Wanderhome</em>, you can do so in the <router-link to="/about/wanderhome">relevant page in this app</router-link>.
|
||||
I wholeheartedly recommend playing it!
|
||||
</p>
|
||||
<hr class="border-gray-400 w-2/3 mx-auto"/>
|
||||
<h2>
|
||||
Technical shite
|
||||
Technobabble
|
||||
</h2>
|
||||
<p>
|
||||
It has been a long time since I made the <em>Masks</em> quiz, and this quiz has been proportionately over-engineered!
|
||||
</p>
|
||||
<h3>
|
||||
Dividing Client/Server Side
|
||||
</h3>
|
||||
<p>
|
||||
In my last upgrade to the <em>Masks</em> quiz, I made the quiz run on a server which renders the questions and evaluates the restuls.
|
||||
The app runs on Python and Flask, and its pages are rendered primarily through Jinja.
|
||||
This means that the Python server handles the quiz and also serves the web site, which is not the most robust.
|
||||
</p>
|
||||
<p>
|
||||
The <em class="uncial-antiqua">Wanderhome</em> quiz in contrast separates the server (running on Python) that renders the quiz and evaluates the results, and the client (running on JavaScript and HTML) that provides the interface.
|
||||
The server is a proper system-agnostic API.
|
||||
</p>
|
||||
<h3>
|
||||
Storing Results
|
||||
</h3>
|
||||
<p>
|
||||
One of the things I have added to the quiz is that it will store the results people get.
|
||||
It will not collect anybody’s name or any identifying information.
|
||||
But it will record how people answered, and what results people got, so users can compare how they did with other users anonymously, and so I can evaluate whether or not the questions are biased or skewing results.
|
||||
It will store all of this in a database: originally an SQLite database, but I can configure the app to use a MySQL database if I wanted.
|
||||
</p>
|
||||
<p>
|
||||
One of the biggest challenges of these personality quiz projects, funnily enough, is the mathematical quandary that writing the questions entails: ensuring that all outcomes are equally possible in the quiz overall, but also that there are sufficiently varied permutations of questions and answers that score for different outcomes to avoid some playbooks collapsing into each other.
|
||||
</p>
|
||||
<h3>
|
||||
Different Frameworks
|
||||
</h3>
|
||||
<p>
|
||||
I made the regrettable decision of teaching myself a new framework for this project.
|
||||
I built the UI using Vue with the Tailwind CSS framework, and it was an experience I found really frustrating because of how I threw myself in the deep end.
|
||||
It is unbelievably fiddly, with even some of the most intuitive features being an utter pain to set up, needing detective work of finding compatible libraries and plug-ins.
|
||||
What was even worse is that the JQuery library that I normally use for API calls is not compatible with Vue, so I will need to learn how to use Axios.
|
||||
</p>
|
||||
<p>
|
||||
On the whole, despite how much of a hassle it was, I preferred the outcome of using Vue and Tailwind because the result looks a lot less samey to my Flask/Bootstrap projects.
|
||||
The result here is one that has much more polish.
|
||||
</p>
|
||||
<hr class="border-gray-400 w-2/3 mx-auto"/>
|
||||
<h3>
|
||||
What Next?
|
||||
</h3>
|
||||
<p>
|
||||
I am running out of geeky TTRPG-related programming projects.
|
||||
I was thinking of making a web app to play a game of <a href="https://www.lamemage.com/microscope/" target="_blank" rel="noopener noreferrer"><em>Microscope</em> by Ben Robbins</a>, published by Lame Mage Productions.
|
||||
There is an app that exists, but every time I tried using it I struggled to get it to work properly.
|
||||
The developer has not responded to my issues on GitHub, so I am tempted to reverse engineer it and make one from the ground up.
|
||||
The original app was written in programming languages that I have no clue about, so I would rather just build it from sratch in Python and, unfortunately, Vue.
|
||||
That might be the next project I tinker with.
|
||||
It will apply all the things I currently know, and also add websockets and state synchronisation to the mix.
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
</Content>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.navlink.active-link, .navlink.exact-active-link {
|
||||
@apply bg-orange-500;
|
||||
@apply text-white;
|
||||
@apply hover:bg-orange-600;
|
||||
@apply hover:text-white;
|
||||
}
|
||||
.navlink {
|
||||
@apply hover:text-orange-300;
|
||||
@apply active:text-orange-500;
|
||||
@apply rounded-lg;
|
||||
@apply h-fit;
|
||||
@apply align-middle;
|
||||
@apply transition-all;
|
||||
@apply ease-in-out;
|
||||
@apply duration-500;
|
||||
}
|
||||
</style>
|
||||
@ -15,13 +15,16 @@
|
||||
<template v-slot:content>
|
||||
<article class="prose mx-auto">
|
||||
<p>
|
||||
First and foremost, my thanks to Jay Dragon and Possum Creek Games for creating such a magnificent work of art.
|
||||
First and foremost, I am delighted that Jay Dragon and Possum Creek Games created such a magnificent work of art.
|
||||
</p>
|
||||
<p>
|
||||
I would also like to thank 8bit for his inspiring enthusiasm: I would have arrived at this game a whole lot later if it weren’ for his shilling for it.
|
||||
</p>
|
||||
<p>
|
||||
And I am deeply grateful to my friends along the way: Claire Bath for being the first playtester of the quiz, and
|
||||
And I am deeply grateful to my friends along the way: Claire Bath for being the first playtester of the quiz.
|
||||
</p>
|
||||
<p>
|
||||
This section is still a work in progress because the programme is still not yet finished.
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
@ -16,6 +16,27 @@
|
||||
<article class="prose mx-auto">
|
||||
<p>
|
||||
<em class="uncial-antiqua">Wanderhome</em> is a pastoral fantasy table-top role-playing game by Jay Dragon, published by Possum Creek Games.
|
||||
Players play anthropomorphic animals who are travelling through a vast landscape, dotted with different features and locales.
|
||||
The game is very focussed on the turning of seasons, how different places live, and how journeys change us.
|
||||
It has a very distinct character, and certainly one of the most compelling and delightful games I have played recently.
|
||||
</p>
|
||||
<p>
|
||||
Despite how whimsical the premise may sound at first, the game is very much intent on exploring incredibly complex dilemmas and conflicts.
|
||||
Looming in the setting of Hæth is the spectre of a terrible war that has recently ended.
|
||||
It has left its scars.
|
||||
In the midst of this, the game does not have any combat: it is explicitly about healing and building a fragile peace.
|
||||
And it is hopeful.
|
||||
</p>
|
||||
<hr class="border-gray-400 w-2/3 mx-auto"/>
|
||||
<h2>
|
||||
Where to Find a Copy
|
||||
</h2>
|
||||
<p>
|
||||
You can buy the game from <a href="https://possumcreekgames.com/en-gb/products/wanderhome" target="_blank" rel="noopener noreferrer">Possum Creek Games’ web site</a>.
|
||||
Physical books have sold out at the time of writing, but you can always <a href="https://possumcreekgames.com/en-gb/products/wanderhome-pdf" target="_blank" rel="noopener noreferrer">buy a pdf</a>.
|
||||
</p>
|
||||
<p>
|
||||
If you are one of my friends and would like to play <em class="uncial-antiqua">Wanderhome</em>, let me know!
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user