Used JQuery to generate one scenario

This commit is contained in:
alisolarflare 2017-06-15 13:28:54 -06:00
parent 9c47280931
commit 566459b7b8
4 changed files with 61 additions and 26 deletions

View file

@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<title>Questions</title>
<script src="./resources/frameworks/jquery-3.2.1.min.js" type="text/javascript"></script>
<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>
<nav>
@ -110,27 +112,7 @@
<input type="text" name="" placeholder="Enter response here">
</li>
<br />
<li>
<p class="adult">
(question for those over the age of 18... or those mature enough)
</p>
One of your friends is upset. Someone has been harrassing them,
asking for innapropriate pictures, constantly private messaging
them about sexual topics without their consent.
(<em>THEIR NAME IS FUCKING GIO</em>)
Your friend is visibly uncomfortable, what would be your first
action?
<ul>
<li>Try to listen to both sides, see what the other person has to say</li>
<li>Go to the moderators, and report what happened.</li>
<li>Try to cheer up your friend, diverting their attention to something else</li>
<li>Listen to your friend, and reccommend some advice</li>
<li>Other...</li>
</ul>
If this situation is happening to you, what would you choose instead?
<br />
<input type="text" name="" placeholder="Enter response here">
</li>
</ul>
<p>More scenarios to come...</p>
<p>

View file

@ -0,0 +1,50 @@
/*<li>
<p class="adult">
(question for those over the age of 18... or those mature enough)
</p>
One of your friends is upset. Someone has been harrassing them,
asking for innapropriate pictures, constantly private messaging
them without their consent.
(<em>THEIR NAME IS FUCKING GIO</em>)
Your friend is visibly uncomfortable, what would be your first
action?
<ul>
<li>Try to listen to both sides, see what the other person has to say</li>
<li>Go to the moderators, and report what happened.</li>
<li>Try to cheer up your friend, diverting their attention to something else</li>
<li>Listen to your friend, and reccommend some advice</li>
<li>Other...</li>
</ul>
If this situation is happening to you, what would you choose instead?
<br />
<input type="text" name="" placeholder="Enter response here">
</li>*/
window.onload = function(){
$adultText = $("<p class=\"adult\">(question for those over the age of 18... or those mature enough)</p>");
$description = $(
"<p>One of your friends is upset. Someone has been harrassing them, asking"
+ "for innapropriate photos, constantly private messaging them without consent"
+ "<br><span class=\"aside\">(THEIR NAME IS FUCKING GIO)</span><br>"
+ "Your friend is visibly uncomfortable, would would be your first action?</p>");
$options = $("<ul></ul>");
$options.append($("<li>Try to listen to both sides, see what the other person has to say</li>"));
$options.append($("<li>Go to the moderators, and report what happened.</li>"));
$options.append($("<li>Try to cheer up your friend, diverting their attention to something else</li>"));
$options.append($("<li>Listen to your friend, and reccommend some advice</li>"));
$options.append($("<li>Other...</li>"));
$question = $("<p>If this was happening to you, what would you choose instead?</p>")
$input = $("<input type=\"text\" placeholder=\"Enter response here\">");
$liElement = $("<li id=\"scenarios-harrassment\"></li>")
$liElement.append($adultText);
$liElement.append($description);
$liElement.append($options);
$liElement.append($input);
console.table($liElement);
$("#scenarios").append($liElement);
};

View file

@ -36,11 +36,11 @@
"adult": false,
},
{
"name": "Gio",
"name": "Harrassment",
"description":
"One of your friends is upset. Someone has been harrassing them,
asking for innapropriate pictures, constantly private messaging
them about sexual topics without their consent.
them without their consent.
<br/>
Your friend is visibly uncomfortable, what would be your first
action?",

View file

@ -1,8 +1,11 @@
#scenarios li{
li, li p{
font-family: "Times New Roman";
}
.adult{
font-family: monospace;
.aside{
color: rgb(250, 250, 250);
}
#scenarios li p.adult{
font-family: monospace ;
color: rgb(240, 0, 100);
}