Skip to content

Commit

Permalink
Merge pull request #16 from ccnmtl/social-support
Browse files Browse the repository at this point in the history 
Add social support map activity skeleton - PMT #110583
  • Loading branch information
@sdreher
sdreher committed Apr 4, 2017
2 parents 1b1f047 + 0ced5ce commit 5d7d58b
Show file tree
Hide file tree
Showing 2 changed files with 200 additions and 1 deletion.
185 changes: 184 additions & 1 deletion worthapp/index.html
View file
Expand Up @@ -16,6 +16,7 @@
<script src="js/myth-fact.js"></script>
<script src="js/feeling.js"></script>
<script src="js/safety.js"></script>
<script src="js/social-support.js"></script>

<link rel="stylesheet" href="css/worth.css">
</head>
Expand Down Expand Up @@ -544,7 +545,189 @@ <h1>Safety planning</h1>

<div class="swiper-slide" id="session-4-11">
<div class="container">
Negotiation
<h1>Negotiation</h1>
</div>
</div>

<div class="swiper-slide" id="session-4-12">
<div class="container">
<h1>Barriers to condom use</h1>
</div>
</div>

<div class="swiper-slide" id="session-4-13">
<div class="container">
<h1>Practicing negotiation</h1>
</div>
</div>

<div class="swiper-slide" id="session-4-17">
<div class="container">
<h1>Social support map intro</h1>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="560" height="315"
src="https://www.youtube.com/embed/pWZ-XA_OpNY"
allowfullscreen></iframe>
</div>
</div>
</div>

<div class="swiper-slide" id="session-4-18">
<div class="container social-support">
<div class="progress-social-support">
<div class="progress-bar" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<h1>Social Support</h1>
<h3>My Friends &amp; Family Map</h3>

<div class="panel s1">
<p>
A map of your support network is
essential. Let's build yours.
</p>
<p>
Think about the people in your life.
</p>
<button type="button" class="btn btn-primary btn-block s1">OK. Let's go!</button>
</div>

<div class="panel hidden s2">
<h5>Part 1 of 4: Person</h5>
<p>
What is the name of a friend or family
member in your social support network?
</p>
<blockquote class="blockquote">
"Aunt Jean is in my network. I talk to her a lot."
</blockquote>
<button type="button" class="btn btn-primary btn-block s2">OK. I got it.</button>
</div>

<div class="panel hidden s3">
<h5>Part 2 of 4: Distance</h5>
<p>
How close are you to this person? By
close we mean someone you feel
emotionally close to or who is someone
you can rely on. This includes someone
who may live far away.
</p>
<img src="..." class="img-fluid" alt="Emotional distance diagram">
<blockquote class="blockquote">
"Aunt Jean is very distant
emotionally. She is kind but I cannot
tell her my true feelings."
</blockquote>
<button type="button" class="btn btn-primary btn-block s3">OK. I got it.</button>
</div>

<div class="panel hidden s4">
<h5>Part 3 of 4: Influence</h5>
<p>
How does this person influence your life?
</p>
<div class="media">
<img class="d-flex mr-3" src="..." alt="Practical support icon">
<div class="media-body">
Practical support is concrete help
such as babysitting, helping you
find work, etc.
</div>
</div>

<div class="media">
<img class="d-flex mr-3" src="..." alt="Emotional support icon">
<div class="media-body">
Emotional support includes things
like listening to you and letting
you share your feelings.
</div>
</div>

<blockquote class="blockquote">
"Aunt Jean makes me feel positive. She
makes me laugh with her stories."
</blockquote>
<button type="button" class="btn btn-primary btn-block s4">OK. I got it.</button>
</div>

<div class="panel hidden s5">
<h5>Part 4 of 4: Support</h5>
<p>
What kind of support does this person
provide?
</p>
<div class="media">
<img class="d-flex mr-3" src="..." alt="Practical support icon">
<div class="media-body">
Practical support is concrete help
such as babysitting, helping you
find work, etc.
</div>
</div>

<div class="media">
<img class="d-flex mr-3" src="..." alt="Emotional support icon">
<div class="media-body">
Emotional support includes things
like listening to you and letting
you share your feelings.
</div>
</div>

<blockquote class="blockquote">
"Aunt Jean provides a lot of practical
support for me because she sends me
money if I need it."
</blockquote>
<button type="button" class="btn btn-primary btn-block s5">OK. I got it.</button>
</div>

<div class="panel hidden s6">
<h5>Support Provider</h5>
<p>
Here's how "Aunt Jean" will appear as
an example on the map.
</p>
<div class="media">
<img class="d-flex mr-3" src="..." alt="Support provider icon">
<div class="media-body">
<ul>
<li><strong>Name: Aunt Jean</strong></li>
<li>Influence: Very Positive</li>
<li>Support: Practical</li>
</ul>
</div>
</div>

<div class="media">
<img class="d-flex mr-3" src="..." alt="Location icon">
<div class="media-body">
<ul>
<li>Distance: Very Distant</li>
<li>(from Me) Emotionally</li>
</ul>
</div>
</div>

<p>
Now, it's time to build your map with
your support providers. Four spots are
provided but you can add others.
</p>

<div class="alert alert-warning" role="alert">
<strong>Don't forget the paper version!</strong>
<p>Please copy this information to your worksheet.</p>
</div>

<div class="alert alert-info" role="alert">
<strong>Are you done?</strong> Swipe left to move on.
</div>
</div>

</div>
</div>

Expand Down
16 changes: 16 additions & 0 deletions worthapp/js/social-support.js
View file
@@ -0,0 +1,16 @@
/* eslint-env es6 */
/* global $, advanceToPanel */

(function() {
$(document).ready(function() {
var $container = $('.container.social-support');
var total = 6;

for (let i = 0; i < total; i++) {
$container.find('button.s' + i).click(function(e) {
e.preventDefault();
advanceToPanel($container, i + 1, total);
});
}
});
})();

0 comments on commit 5d7d58b

Please sign in to comment.