I am super proud of what I've done
This commit is contained in:
parent
86af3e529e
commit
6fa511f19c
3 changed files with 101 additions and 93 deletions
157
questions.html
157
questions.html
|
@ -6,7 +6,6 @@
|
|||
<script src="./resources/frameworks/jquery-3.2.1.min.js" type="text/javascript"></script>
|
||||
<link href='https://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="resources/questions/style.css">
|
||||
<link rel="stylesheet" href="resources/global/style.css">
|
||||
<script type="text/javascript" src="resources/questions/scenarios.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -19,22 +18,12 @@
|
|||
<a href="./spawn.html">Spawn</a>
|
||||
</nav>
|
||||
|
||||
<h1>Our Little Interview</h1>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#who">The Who Questions</a></li>
|
||||
<li><a href="#what">The What Questions</a></li>
|
||||
<li><a href="#why">The Why Questions</a></li>
|
||||
<li><a href="#how">The How Questions</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<h2 id="who">Who</h2>
|
||||
<h3 class="welcome">Welcome to Chromagaming!</h3>
|
||||
<p>It seems like you're interested in becoming an official member.</p>
|
||||
<p>Before we accept you into our community, we'd like to get to know you first.</p>
|
||||
|
||||
<h1 id="who" class="tab">Who</h1>
|
||||
<h1 class="welcome">Welcome to Chromagaming!</h1>
|
||||
<div class="introduction">
|
||||
<p>It seems like you're interested in becoming an official member.</p>
|
||||
<p>Before we accept you into our community, we'd like to get to know you first.</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Name<br />
|
||||
<input type="text" name="" value=""></li>
|
||||
|
@ -68,71 +57,79 @@
|
|||
<input type="submit">
|
||||
</ul>
|
||||
|
||||
<h2 id="what">What</h2>
|
||||
<h3>Every server has its rules</h3>
|
||||
<p>
|
||||
Although our rules are a bit more
|
||||
straight forward than usual. This section tests your knowledge
|
||||
of our rules.
|
||||
</p>
|
||||
<ul>
|
||||
<li><em>If we can't make questions about our rules,
|
||||
then we can put the actual ruleset in here</em></li>
|
||||
<li><em>This should be a "sanity" check. It should see
|
||||
if applicants are paying attention.</em></li>
|
||||
<li><em>Consider this a basic filter.</em></li>
|
||||
</ul>
|
||||
<h1 id="what" class="tab">What</h1>
|
||||
<h1>Every server has its rules</h1>
|
||||
<div class="introduction">
|
||||
<p>
|
||||
Although our rules are a bit more
|
||||
straight forward than usual. This section tests your knowledge
|
||||
of our rules.
|
||||
</p>
|
||||
<ul>
|
||||
<li><em>If we can't make questions about our rules,
|
||||
then we can put the actual ruleset in here</em></li>
|
||||
<li><em>This should be a "sanity" check. It should see
|
||||
if applicants are paying attention.</em></li>
|
||||
<li><em>Consider this a basic filter.</em></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 id="why">Why</h2>
|
||||
<h3>Our server runs on a case by case basis</h3>
|
||||
<h1 id="why" class="tab">Why</h1>
|
||||
<h1>Our server runs on a case by case basis</h1>
|
||||
<div class="introduction">
|
||||
<p>
|
||||
Therefore instead of testing you on the rules of the land, it'd be
|
||||
more appropriate to test you on your ability to react.
|
||||
</p>
|
||||
<p>
|
||||
Following are scenarios, where <strong>multiple answers
|
||||
</strong>are correct. Choose the awnser that you feel is
|
||||
most important.
|
||||
</p>
|
||||
<p>
|
||||
Choose the action you'd perform first.
|
||||
</p>
|
||||
<p>
|
||||
It doesn't matter <em>what</em> your awnser to this question is.
|
||||
What matters in this case is <em>why</em> you
|
||||
choose the awnser.
|
||||
</p>
|
||||
</div>
|
||||
<h2>Scenarios</h2>
|
||||
<div id="scenarios">
|
||||
</div>
|
||||
<p>More scenarios to come...</p>
|
||||
<p>
|
||||
Therefore instead of testing you on the rules of the land, it'd be
|
||||
more appropriate to test you on your ability to react.
|
||||
<em>
|
||||
These scenarios should test the applicant's critical thinking.
|
||||
It'd be interesting to see how new players respond to events
|
||||
that happened on the server.
|
||||
<br />
|
||||
New Scenarios are always welcome! If you have any ideas or
|
||||
possible scenarios to ask new players, send a ping to a
|
||||
developer or post to #feedback on Discord.
|
||||
</em>
|
||||
</p>
|
||||
<p>
|
||||
Following are scenarios, where <strong>multiple answers
|
||||
</strong>are correct. Choose the awnser that you feel is
|
||||
most important.
|
||||
</p>
|
||||
<p>
|
||||
Choose the action you'd perform first.
|
||||
</p>
|
||||
<p>
|
||||
It doesn't matter <em>what</em> your awnser to this question is.
|
||||
What matters in this case is <em>why</em> you
|
||||
choose the awnser.
|
||||
</p>
|
||||
<h3>Scenarios</h3>
|
||||
<ul id="scenarios">
|
||||
</ul>
|
||||
<p>More scenarios to come...</p>
|
||||
<p>
|
||||
<em>
|
||||
These scenarios should test the applicant's critical thinking.
|
||||
It'd be interesting to see how new players respond to events
|
||||
that happened on the server.
|
||||
<br />
|
||||
New Scenarios are always welcome! If you have any ideas or
|
||||
possible scenarios to ask new players, send a ping to a
|
||||
developer or post to #feedback on Discord.
|
||||
</em>
|
||||
</p>
|
||||
<h2 id="how">How</h2>
|
||||
<p>
|
||||
Congratulations! By filling out this form, you have been given
|
||||
a few basic permissions. Feel free to roam around spawn, view
|
||||
our dynamic map, join our discord channel, and discover our
|
||||
custom coded Civilization View.
|
||||
<br />
|
||||
We'll let you know when the moderators have finished reviewing
|
||||
your application. Till then, have fun!
|
||||
</p>
|
||||
<p id="application-status">Your application is awaiting approval</p>
|
||||
<div class="footer-image-links">
|
||||
<img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
|
||||
<img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
|
||||
<img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
|
||||
<img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
|
||||
</div>
|
||||
<h1 id="how" class="tab">How</h1>
|
||||
<h1>Congratulations!</h1>
|
||||
<div class="introduction">
|
||||
<p>
|
||||
By filling out this form, you have been given
|
||||
a few basic permissions. Feel free to roam around spawn, view
|
||||
our dynamic map, join our discord channel, and discover our
|
||||
custom coded Civilization View.
|
||||
</p>
|
||||
<p>
|
||||
We'll let you know when the moderators have finished reviewing
|
||||
your application. Till then, have fun!
|
||||
</p>
|
||||
</div>
|
||||
<p id="application-status">Your application is awaiting approval</p>
|
||||
<div class="footer-image-links">
|
||||
<img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
|
||||
<img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
|
||||
<img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
|
||||
<img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -3,7 +3,7 @@ window.onload = function(){
|
|||
makeScenario = function(scenario){
|
||||
|
||||
//Create output Element
|
||||
let $trueOutputElement = $("<li></li>")
|
||||
let $trueOutputElement = $("<li></li")
|
||||
$trueOutputElement.attr("id", `scenarios-${scenario.name}`);
|
||||
|
||||
let $outputElement = $("<div class=\"accordion-panel\"></div>");
|
||||
|
@ -20,7 +20,7 @@ window.onload = function(){
|
|||
|
||||
//Mature Content rating
|
||||
if(scenario.adult == true){
|
||||
$adultText = $("<p>)</p>")
|
||||
$adultText = $("<p></p>")
|
||||
.addClass("adult")
|
||||
.append(`(question for those over the age of 18... or those mature enough)`)
|
||||
|
||||
|
@ -48,7 +48,11 @@ window.onload = function(){
|
|||
}
|
||||
//Other Question
|
||||
if (scenario.other){
|
||||
$otherElement = $("<li>Other... <input type=text></li>");
|
||||
$inputTag = $("<input>")
|
||||
.attr("type", "radio")
|
||||
.attr("name", `radio-${scenario.name}`);
|
||||
$otherElement = $("<li>Other... <input type=text></li>")
|
||||
.prepend($inputTag);
|
||||
$optionElement.append($otherElement);
|
||||
}
|
||||
|
||||
|
|
|
@ -4,17 +4,22 @@ html{
|
|||
background-color: lightgray;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Lucida Sans Unicode";
|
||||
font-weight: lighter;
|
||||
display: none;
|
||||
}
|
||||
h3{
|
||||
h1{
|
||||
font-family: Balthazar;
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
font-size: 30px;
|
||||
}
|
||||
h1.tab{
|
||||
display: none;
|
||||
}
|
||||
h2 {
|
||||
font-family: Balthazar;
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: Georgia;
|
||||
font-size: 17px;
|
||||
|
@ -31,14 +36,16 @@ li, li p{
|
|||
}
|
||||
|
||||
.footer-image-links{
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-image-links img{
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.introduction{
|
||||
border-bottom: groove;
|
||||
}
|
||||
#scenarios li p.adult{
|
||||
font-family: monospace;
|
||||
color: rgb(240, 0, 100);
|
||||
|
|
Loading…
Reference in a new issue