I am super proud of what I've done

This commit is contained in:
alisolarflare 2017-06-19 03:04:02 -04:00
parent 86af3e529e
commit 6fa511f19c
3 changed files with 101 additions and 93 deletions

View file

@ -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>

View file

@ -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);
}

View file

@ -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);