ChromaGaming/civ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

I am super proud of what I've done

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

157
questions.html
View file

@ -6,7 +6,6 @@
<script src="./resources/frameworks/jquery-3.2.1.min.js" type="text/javascript"></script> <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 href='https://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet'>
<link rel="stylesheet" href="resources/questions/style.css"> <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> <script type="text/javascript" src="resources/questions/scenarios.js"></script>
</head> </head>
<body> <body>
@ -19,22 +18,12 @@
<a href="./spawn.html">Spawn</a> <a href="./spawn.html">Spawn</a>
</nav> </nav>
<h1>Our Little Interview</h1> <h1 id="who" class="tab">Who</h1>
<h1 class="welcome">Welcome to Chromagaming!</h1>
<nav> <div class="introduction">
<ul> <p>It seems like you're interested in becoming an official member.</p>
<li><a href="#who">The Who Questions</a></li> <p>Before we accept you into our community, we'd like to get to know you first.</p>
<li><a href="#what">The What Questions</a></li> </div>
<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>
<ul> <ul>
<li>Name<br /> <li>Name<br />
<input type="text" name="" value=""></li> <input type="text" name="" value=""></li>
@ -68,71 +57,79 @@
<input type="submit"> <input type="submit">
</ul> </ul>
<h2 id="what">What</h2> <h1 id="what" class="tab">What</h1>
<h3>Every server has its rules</h3> <h1>Every server has its rules</h1>
<p> <div class="introduction">
Although our rules are a bit more <p>
straight forward than usual. This section tests your knowledge Although our rules are a bit more
of our rules. straight forward than usual. This section tests your knowledge
</p> of our rules.
<ul> </p>
<li><em>If we can't make questions about our rules, <ul>
then we can put the actual ruleset in here</em></li> <li><em>If we can't make questions about our rules,
<li><em>This should be a "sanity" check. It should see then we can put the actual ruleset in here</em></li>
if applicants are paying attention.</em></li> <li><em>This should be a "sanity" check. It should see
<li><em>Consider this a basic filter.</em></li> if applicants are paying attention.</em></li>
</ul> <li><em>Consider this a basic filter.</em></li>
</ul>
</div>
<h2 id="why">Why</h2> <h1 id="why" class="tab">Why</h1>
<h3>Our server runs on a case by case basis</h3> <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> <p>
Therefore instead of testing you on the rules of the land, it'd be <em>
more appropriate to test you on your ability to react. 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>
<p> <h1 id="how" class="tab">How</h1>
Following are scenarios, where <strong>multiple answers <h1>Congratulations!</h1>
</strong>are correct. Choose the awnser that you feel is <div class="introduction">
most important. <p>
</p> By filling out this form, you have been given
<p> a few basic permissions. Feel free to roam around spawn, view
Choose the action you'd perform first. our dynamic map, join our discord channel, and discover our
</p> custom coded Civilization View.
<p> </p>
It doesn't matter <em>what</em> your awnser to this question is. <p>
What matters in this case is <em>why</em> you We'll let you know when the moderators have finished reviewing
choose the awnser. your application. Till then, have fun!
</p> </p>
<h3>Scenarios</h3> </div>
<ul id="scenarios"> <p id="application-status">Your application is awaiting approval</p>
</ul> <div class="footer-image-links">
<p>More scenarios to come...</p> <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
<p> <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
<em> <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
These scenarios should test the applicant's critical thinking. <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
It'd be interesting to see how new players respond to events </div>
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>
</body> </body>
</html> </html>

10
resources/questions/scenarios.js
View file

@ -3,7 +3,7 @@ window.onload = function(){
makeScenario = function(scenario){ makeScenario = function(scenario){
//Create output Element //Create output Element
let $trueOutputElement = $("<li></li>") let $trueOutputElement = $("<li></li")
$trueOutputElement.attr("id", `scenarios-${scenario.name}`); $trueOutputElement.attr("id", `scenarios-${scenario.name}`);
let $outputElement = $("<div class=\"accordion-panel\"></div>"); let $outputElement = $("<div class=\"accordion-panel\"></div>");
@ -20,7 +20,7 @@ window.onload = function(){
//Mature Content rating //Mature Content rating
if(scenario.adult == true){ if(scenario.adult == true){
$adultText = $("<p>)</p>") $adultText = $("<p></p>")
.addClass("adult") .addClass("adult")
.append(`(question for those over the age of 18... or those mature enough)`) .append(`(question for those over the age of 18... or those mature enough)`)
@ -48,7 +48,11 @@ window.onload = function(){
} }
//Other Question //Other Question
if (scenario.other){ 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); $optionElement.append($otherElement);
} }

27
resources/questions/style.css
View file

@ -4,17 +4,22 @@ html{
background-color: lightgray; background-color: lightgray;
} }
h2 { h1{
font-family: "Lucida Sans Unicode";
font-weight: lighter;
display: none;
}
h3{
font-family: Balthazar; font-family: Balthazar;
font-weight: bolder; font-weight: bolder;
font-style: italic; font-style: italic;
font-size: 30px; font-size: 30px;
} }
h1.tab{
display: none;
}
h2 {
font-family: Balthazar;
font-weight: bolder;
font-style: italic;
font-size: 25px;
}
p { p {
font-family: Georgia; font-family: Georgia;
font-size: 17px; font-size: 17px;
@ -31,14 +36,16 @@ li, li p{
} }
.footer-image-links{ .footer-image-links{
display: block; text-align: center;
margin: 10px auto;
width: 400px;
} }
.footer-image-links img{ .footer-image-links img{
display: inline-block;
width: 64px;
padding: 5px; padding: 5px;
} }
.introduction{
border-bottom: groove;
}
#scenarios li p.adult{ #scenarios li p.adult{
font-family: monospace; font-family: monospace;
color: rgb(240, 0, 100); color: rgb(240, 0, 100);