# Welcome to the world of Pokemon!
You've been brought here by an unknown force, and it's my job to match your spirit to a Pokemon.
I'm sure you know the drill. Answer my [[questions->Question1]] to the best of your ability, please!<style>
body {
animation: colorchange 20s infinite; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 20s infinite; /* Chrome and Safari */
}
@keyframes colorchange
{
0% {background: hsl(0, 100%, 50%);}
10% {background: hsl(36, 100%, 50%);}
20% {background: hsl(72, 100%, 50%);}
30% {background: hsl(108, 100%, 50%);}
40% {background: hsl(144, 100%, 50%);}
50% {background: hsl(180, 100%, 50%);}
60% {background: hsl(216, 100%, 60%);}
70% {background: hsl(252, 100%, 70%);}
80% {background: hsl(286, 100%, 60%);}
90% {background: hsl(324, 100%, 50%);}
100% {background: hsl(360, 100%, 50%);}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: hsl(0, 100%, 50%);}
10% {background: hsl(36, 100%, 50%);}
20% {background: hsl(72, 100%, 50%);}
30% {background: hsl(108, 100%, 50%);}
40% {background: hsl(144, 100%, 50%);}
50% {background: hsl(180, 100%, 50%);}
60% {background: hsl(216, 100%, 60%);}
70% {background: hsl(252, 100%, 70%);}
80% {background: hsl(286, 100%, 60%);}
90% {background: hsl(324, 100%, 50%);}
100% {background: hsl(360, 100%, 50%);}
}
</style>
Alright, here we go...
<% s.questionIndex = Math.floor(Math.random() * s.questions.length);
s.currentQuestion = s.questions[s.questionIndex];
s.questions.splice(s.questionIndex, 1); %>
<%= s.currentQuestion.text %>
<div id="positive" class="answer" onclick="window.changeEachStat(window.story.state.currentQuestion.affirmativeStats);">
[[<%= s.currentQuestion.affirmativeText %>->Question2]]
</div>
<br>
<div id="negative" class="answer" onclick="window.changeEachStat(window.story.state.currentQuestion.dissentingStats);">
[[<%= s.currentQuestion.dissentingText %>->Question2]]
</div>
<!--div onclick="window.story.save();">Save</div--><style>
body {
animation: colorchange 20s infinite; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 20s infinite; /* Chrome and Safari */
}
@keyframes colorchange
{
0% {background: hsl(0, 100%, 50%);}
10% {background: hsl(36, 100%, 50%);}
20% {background: hsl(72, 100%, 50%);}
30% {background: hsl(108, 100%, 50%);}
40% {background: hsl(144, 100%, 50%);}
50% {background: hsl(180, 100%, 50%);}
60% {background: hsl(216, 100%, 60%);}
70% {background: hsl(252, 100%, 70%);}
80% {background: hsl(286, 100%, 60%);}
90% {background: hsl(324, 100%, 50%);}
100% {background: hsl(360, 100%, 50%);}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: hsl(0, 100%, 50%);}
10% {background: hsl(36, 100%, 50%);}
20% {background: hsl(72, 100%, 50%);}
30% {background: hsl(108, 100%, 50%);}
40% {background: hsl(144, 100%, 50%);}
50% {background: hsl(180, 100%, 50%);}
60% {background: hsl(216, 100%, 60%);}
70% {background: hsl(252, 100%, 70%);}
80% {background: hsl(286, 100%, 60%);}
90% {background: hsl(324, 100%, 50%);}
100% {background: hsl(360, 100%, 50%);}
}
</style>
Hmm... how about this?
<% s.questionIndex = Math.floor(Math.random() * s.questions.length);
s.currentQuestion = s.questions[s.questionIndex];
s.questions.splice(s.questionIndex, 1); %>
<%= s.currentQuestion.text %>
<div id="positive" class="answer" onclick="window.changeEachStat(window.story.state.currentQuestion.affirmativeStats);">
[[<%= s.currentQuestion.affirmativeText %>->Question3]]
</div>
<br>
<div id="negative" class="answer" onclick="window.changeEachStat(window.story.state.currentQuestion.dissentingStats);">
[[<%= s.currentQuestion.dissentingText %>->Question3]]
</div><style>
body {
animation: colorchange 20s infinite; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 20s infinite; /* Chrome and Safari */
}
@keyframes colorchange
{
0% {background: hsl(0, 100%, 50%);}
10% {background: hsl(36, 100%, 50%);}
20% {background: hsl(72, 100%, 50%);}
30% {background: hsl(108, 100%, 50%);}
40% {background: hsl(144, 100%, 50%);}
50% {background: hsl(180, 100%, 50%);}
60% {background: hsl(216, 100%, 60%);}
70% {background: hsl(252, 100%, 70%);}
80% {background: hsl(286, 100%, 60%);}
90% {background: hsl(324, 100%, 50%);}
100% {background: hsl(360, 100%, 50%);}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: hsl(0, 100%, 50%);}
10% {background: hsl(36, 100%, 50%);}
20% {background: hsl(72, 100%, 50%);}
30% {background: hsl(108, 100%, 50%);}
40% {background: hsl(144, 100%, 50%);}
50% {background: hsl(180, 100%, 50%);}
60% {background: hsl(216, 100%, 60%);}
70% {background: hsl(252, 100%, 70%);}
80% {background: hsl(286, 100%, 60%);}
90% {background: hsl(324, 100%, 50%);}
100% {background: hsl(360, 100%, 50%);}
}
</style>
Interesting... try this one?
<% s.questionIndex = Math.floor(Math.random() * s.questions.length);
s.currentQuestion = s.questions[s.questionIndex];
s.questions.splice(s.questionIndex, 1); %>
<%= s.currentQuestion.text %>
<div id="positive" class="answer" onclick="window.changeEachStat(window.story.state.currentQuestion.affirmativeStats);">
[[<%= s.currentQuestion.affirmativeText %>->Question4]]
</div>
<br>
<div id="negative" class="answer" onclick="window.changeEachStat(window.story.state.currentQuestion.dissentingStats);">
[[<%= s.currentQuestion.dissentingText %>->Question4]]
</div><style>
body {
animation: colorchange 20s infinite; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 20s infinite; /* Chrome and Safari */
}
@keyframes colorchange
{
0% {background: hsl(0, 100%, 50%);}
10% {background: hsl(36, 100%, 50%);}
20% {background: hsl(72, 100%, 50%);}
30% {background: hsl(108, 100%, 50%);}
40% {background: hsl(144, 100%, 50%);}
50% {background: hsl(180, 100%, 50%);}
60% {background: hsl(216, 100%, 60%);}
70% {background: hsl(252, 100%, 70%);}
80% {background: hsl(286, 100%, 60%);}
90% {background: hsl(324, 100%, 50%);}
100% {background: hsl(360, 100%, 50%);}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: hsl(0, 100%, 50%);}
10% {background: hsl(36, 100%, 50%);}
20% {background: hsl(72, 100%, 50%);}
30% {background: hsl(108, 100%, 50%);}
40% {background: hsl(144, 100%, 50%);}
50% {background: hsl(180, 100%, 50%);}
60% {background: hsl(216, 100%, 60%);}
70% {background: hsl(252, 100%, 70%);}
80% {background: hsl(286, 100%, 60%);}
90% {background: hsl(324, 100%, 50%);}
100% {background: hsl(360, 100%, 50%);}
}
</style>
I think I'm getting a feel for you. Now...
<% s.questionIndex = Math.floor(Math.random() * s.questions.length);
s.currentQuestion = s.questions[s.questionIndex];
s.questions.splice(s.questionIndex, 1); %>
<%= s.currentQuestion.text %>
<div id="positive" class="answer" onclick="window.changeEachStat(window.story.state.currentQuestion.affirmativeStats);">
[[<%= s.currentQuestion.affirmativeText %>->Question5]]
</div>
<br>
<div id="negative" class="answer" onclick="window.changeEachStat(window.story.state.currentQuestion.dissentingStats);">
[[<%= s.currentQuestion.dissentingText %>->Question5]]
</div><style>
body {
animation: colorchange 20s infinite; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 20s infinite; /* Chrome and Safari */
}
@keyframes colorchange
{
0% {background: hsl(0, 100%, 50%);}
10% {background: hsl(36, 100%, 50%);}
20% {background: hsl(72, 100%, 50%);}
30% {background: hsl(108, 100%, 50%);}
40% {background: hsl(144, 100%, 50%);}
50% {background: hsl(180, 100%, 50%);}
60% {background: hsl(216, 100%, 60%);}
70% {background: hsl(252, 100%, 70%);}
80% {background: hsl(286, 100%, 60%);}
90% {background: hsl(324, 100%, 50%);}
100% {background: hsl(360, 100%, 50%);}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: hsl(0, 100%, 50%);}
10% {background: hsl(36, 100%, 50%);}
20% {background: hsl(72, 100%, 50%);}
30% {background: hsl(108, 100%, 50%);}
40% {background: hsl(144, 100%, 50%);}
50% {background: hsl(180, 100%, 50%);}
60% {background: hsl(216, 100%, 60%);}
70% {background: hsl(252, 100%, 70%);}
80% {background: hsl(286, 100%, 60%);}
90% {background: hsl(324, 100%, 50%);}
100% {background: hsl(360, 100%, 50%);}
}
</style>
Almost there! Last one.
<% s.questionIndex = Math.floor(Math.random() * s.questions.length);
s.currentQuestion = s.questions[s.questionIndex];
s.questions.splice(s.questionIndex, 1); %>
<%= s.currentQuestion.text %>
<div id="positive" class="answer" onclick="window.changeEachStat(window.story.state.currentQuestion.affirmativeStats);">
[[<%= s.currentQuestion.affirmativeText %>->Results]]
</div>
<br>
<div id="negative" class="answer" onclick="window.changeEachStat(window.story.state.currentQuestion.dissentingStats);">
[[<%= s.currentQuestion.dissentingText %>->Results]]
</div>empty rnempty rnempty rnempty rn### Done!
Based on what I've gleaned about you:
<% s.first = highest();
s.second = highest();
s.third = highest();
s.fourth = highest();
s.fifth = highest();
console.log(s.first + s.second + s.third + s.fourth + s.fifth); %>
<%= traitBlurbs(s.first) %>
<%= traitBlurbs(s.second) %>
<% var pokemon = new Pokemon(resultSpecies(s.first, s.second, s.third, s.fourth, s.fifth));
s.player = new Player('name', 'gender', pokemon);
console.log(s.player); %>
A person like that... would be perfect as the <%= s.player.pokemon.types[0] %>-type, <%= s.player.pokemon.species %>!
Now, are you ready to start your **[[adventure->Discord]]**?## ...Well, this is where the adventure goes.
But this is also about as much as I can make by myself. I'm alright at writing,
but coding everything and making it all look good on top of it, and all the
branches that are made possible with a tool like this... it's a bit *much* for just
one person to handle.
That's where you come in.
<br>
This is going to be another **community project**. All the info
that you need to contribute or just to follow this project's development is in
[the project discord here](https://discord.gg/sa9ex24).
<br>
We'll still need artists - I'd like to have some backgrounds for the places you
visit on your adventure - but we especially need writers this time around: notice how
everything so far has been *text*? Yep. We need a whole lot of it.
Even if you don't want to contribute, you can still join and talk about the project or
the fandom with us all. We don't bite!
So what are you waiting for, Jump in!