Skip to content

Instantly share code, notes, and snippets.

@paulcook

paulcook/OGG Boxes

Last active August 9, 2016 18:05
Show Gist options
  • Save paulcook/90eedb432a09bb6dc56f to your computer and use it in GitHub Desktop.
Save paulcook/90eedb432a09bb6dc56f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
OGG Boxes
// Preferred correct-incorrect-interactive
<div class="correct-incorrect-interactive">
<ol class="questions">
<li class="question">
<p><strong>This statement says the hospital can call your primary care doctor and talk with him/her about your treatment.</strong></p>
<ol class="choices">
<li class="choice correct"><i></i><strong>TRUE</strong></li>
<li class="choice incorrect"><i></i><strong>FALSE</strong></li>
</ol>
</li>
</ol>
<p><span class="refresh btn btn-primary">Refresh Answers</span></p>
</div>
<div class="interactive-select">
<div class="question">
<p>&ldquo;I&rsquo;ve got a favor to ask (intention).
<div class="interactive">
<i class="indicator fa fa-circle-thin"></i>
<select id="select1" class="choices form-control">
<option class="blank">Choose one...</option>
<option class="incorrect choice" data-val="1" data-text=''>Problem</option>
<option class="incorrect choice" data-val="2" data-text=''>Interpretations</option>
<option class="incorrect choice" data-val="3" data-text=''>Consequences</option>
<option class="incorrect choice" data-val="4" data-text=''>Feelings</option>
<option class="correct choice" data-val="5" data-text=''>Intentions</option>
</select>
</div>
</p>
</div>
</div>
<div class="flat-button-collapse">
<h4 class="flat-button flat-button-half" data-toggle="collapse" data-target="#collapse-content">Transportation</h4>
<div class="collapse flat-button-content" id="collapse-content">
<p>Transportation is one of the most vital services for elderly residents in affordable housing. Transportation is necessary for linking seniors to the supportive services they need while allowing them to remain living independently.</p>
<p>The <a href="http://www.seniortransportation.net" target="_blank">National Center on Senior Transportation</a> is also a great resource for service coordinators. It provides national data and information, links to local resources and best practices from around the country.&nbsp;</p>
</div>
</div>
<div class="simple-box-interactive">
<p align="left"><!-- content --></p>
<p><button class="btn btn-primary btn-small btn-small" type="button">Learn More...&nbsp;</button></p>
<div class="simple-box-interactive-inner simple-box-interactive-inner-box grey-box" style="display: none;">
<!-- learn more content -->
</div>
</div>
<div class="blue-button-collapse">
<h4 class="bbc-button" data-toggle="collapse" data-target="#collapse-content"><!-- button content/title --></h4>
<div class="collapse bbc-content" id="collapse-content">
<!-- content -->
</div>
</div>
<div class="simple_interactive">
<div class="form-group">
<label>
<textarea class="col-md-8" cols="70" rows="10"></textarea>
</label>
</div>
<a class="get_feedback btn btn-primary" href="#">Get Feedback</a>
<div class="feedback"></div>
</div>
<div class="simple_interactive">
<div class="form-group">
<label>
<textarea class="col-md-8" cols="70" rows="10"></textarea>
</label>
</div>
<a class="get_feedback btn btn-primary" href="#">Get Feedback</a>
<div class="feedback"></div>
</div>
<div class="simple_interactive interactive-simple-save">
<div class="form-group">
<label>
<textarea class="col-md-8" cols="70" rows="10"></textarea>
</label>
</div>
<a class="save-input btn btn-primary" href="#">Submit</a>
</div>
<div class="simple_interactive closer-look">
<a class="get_feedback" href="#"><img alt="" src="https://ogg.osu.edu/media/images/modules/closer_look.jpg" style="width: 100px; height: 47px;" /></a>
<div class="feedback">
</div>
</div>
<div class="correct-incorrect-interactive">
<p class="question"><strong><!-- Question for interactive --></strong></span></p>
<p class="answer"><img alt="incorrect" class="iscorrect" height="20" name="assessment1" src="/media/images/incorrect.jpg" width="20" style="display: none; width: 20px; height: 20px;"><strong>A. </strong></p>
<p class="answer"><img alt="correct" class="iscorrect" height="20" name="assessment2" src="/media/images/correct.jpg" width="20" style="display: none; width: 20px; height: 20px;"><strong>C. </strong></p>
<p><span class="refresh btn btn-primary">Refresh Answers</span></p>
</div>
<section class="fancy">
<article>
<header>
<h3>
<span>
<!-- heading -->
</span>
</h3>
</header>
<!--fd4me: can have class="blockquote"-->
<p>
<!-- content here -->
</p>
</article>
</section>
<section class="fancy for-your-information">
<article>
<header>
<h3>
<span>
For your information
</span>
</h3>
</header>
<p>For more information . . .</p>
<p><span style="color: #008080;">Share Seniors Stay Safer on the Internet Handout with group</span></p>
<p><span style="color: #008080;">Share Cybersecurity Handout with group</span></p>
<div><a href="https://www.fbi.gov/scams-safety/fraud/internet_fraud" target="_blank">Federal Bureau of Investigations - Common Fraud Schemes: Internet Fraud</a></div>
</article>
</section>
<section class="fancy consider-the-following">
<article>
<header>
<h3>
<span>
Consider the Following
</span>
</h3>
</header>
<p>
<!-- content here -->
</p>
</article>
</section>
<section class="fancy whats-it-mean">
<article>
<header>
<h3>
<span>
What does it all mean?
</span>
</h3>
</header>
<p>
<!-- content here -->
</p>
</article>
</section>
<section class="fancy participant-note">
<article>
<header>
<h3>Note to Participant</h3>
</header>
<p>&nbsp;</p><!-- contents -->
</article>
</section>
<section class="fancy meet-the-faculty">
<article>
<header>
<h3>
<span>
Meet the Faculty
</span>
</h3>
<h4>
<!-- faculty name -->
</h4>
</header>
<img alt="" class="floatleft" height="160" src="http://ogg.osu.edu/media/images/staff/" width="160" />
<p>
<!-- faculty bio -->
</p>
</article>
</section>
<section class="fancy closer-look">
<article>
<header>
<h3><span>Case in Point </span></h3>
<h5><i>Henry</i></h5>
</header>
<img class="floatright" src="https://ogg.osu.edu/media/images/.jpg" />
<!-- Case in Point content -->
<p>Take a moment to enter your response&nbsp;to the question in the text box provided and click on &quot;Get Feedback&quot; to gain additional insight.</p>
<!-- Question -->
<div class="simple_interactive">
<div class="form-group">
<label>
<textarea class="col-md-8" cols="70" rows="10"></textarea>
</label>
</div>
<a class="get_feedback btn btn-primary">Get Feedback</a>
<div class="feedback" style="display: block;">
<p><strong>Feedback:</strong></p>
<!-- Feedback -->
<a class="close" href="#">Close</a></div>
</div>
</article>
</section>
<section class="fancy research-into-practice">
<article>
<header>
<h3>
<span>
Putting Research into Practice
</span>
</h3>
</header>
<p>
<!-- content here -->
</p>
</article>
</section>
<section class="fancy reflection-and-growth">
<article>
<header>
<h3>
<span>
Reflection and Growth
</span>
</h3>
</header>
<p>
<!-- content here -->
</p>
</article>
</section>
<section class="fancy spirituality-case-study">
<article>
<header>
<h3>
<span>
<small>
In Our Everyday World . . .
</small>
<br />"Spirituality in Nature"
</span>
</h3>
</header>
<p>
<!-- content -->
</p>
</article>
</section>
<section class="fancy resources">
<article>
<header>
<h3>
<span>
Resources
</span>
</h3>
</header>
<p>
<!-- content -->
</p>
</article>
</section>
<section class="fancy food-for-thought">
<article>
<header>
<h3>
<span>
Food for Thought
</span>
</h3>
</header>
<!-- content goes here -->
</article>
</section>
<section class="fancy key-point">
<article>
<header>
<h3>
<span>
Key Point
</span>
</h3>
</header>
<!-- content goes here -->
</article>
</section>
<section class="fancy important-point">
<article>
<header>
<h3>
<span>
Important Point!
</span>
</h3>
</header>
<!-- content goes here -->
</article>
</section>
<section class="fancy video-clip">
<article>
<header>
<h3>Video Clip</h3>
<p>Take a few moments to watch a short video on this topic before moving on.</p>
</header>
<!-- YouTube Embed code here -->
<!-- Use class="center-iframe" on the iframe to center it.-->
</article>
</section>
<section class="fancy interactive">
<article>
<p>
<!-- content -->
</p>
<p>
<a class="simple_interactive" href="#1">
<!-- interactive content -->
</a>
</p>
<p class="interactive_feedback">
<span style="color: #ff0000;">
<!-- feedback content -->
</span>
</p>
</article>
</section>
<section class="fancy reflection">
<article>
<header>
<h3>
<span>
Questions for Reflection:
</span>
</h3>
</header>
<div class="clearfix">
<p>
<!-- question for reflection -->
</p>
<div class="simple_interactive">
<form action="#" method="get">
<!-- form elements -->
<textarea class="stretch-input-w" name="interactive"></textarea>
<br />
<input type="submit" name="submit" value="Get Feedback" />
</br />
<div class="feedback">
<h5>Feedback:</h5>
<p>
<!-- feedback -->
</p>
</div>
</form>
</div>
</div>
</article>
</section>
<section class="fancy case-study">
<article>
<header>
<h3>
<span>
Case Study
</span>
</h3>
</header>
<div class="clearfix">
<img alt="" class="floatleft" src="http://ogg.osu.edu/media/images/" width="280" height="273" />
<p></p>
</div>
<div class="clearfix">
<h4>
Questions for Reflection:
</h4>
<p>
<!-- question for reflection -->
</p>
<div class="simple_interactive">
<form action="#" method="get">
<!-- form elements -->
<textarea name="interactive" cols="55" rows="4" class="span6"></textarea>
<br />
<input type="submit" name="submit" value="Get Feedback" />
</br />
<div class="feedback">
<h5>Feedback:</h5>
<p>
<!-- feedback -->
</p>
</div>
</form>
</div>
</div>
</article>
</section>
<!-- Accordian Interactive from AASC/New -->
<div class="row">
<div class="col-md-6">
<div class="accordion plain">
<div class="accordion-group" style="border:none">
<div class="accordion-heading text-center"><a class="accordion-toggle btn-flat btn-plain" data-toggle="collapse" href="#collapse1"><i class="icon-hand-right"></i> <!-- Title of accordian section --> </a></div>
<div class="accordion-body collapse" id="collapse1">
<div class="accordion-inner">
<p><!-- content for accordian section --></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion plain">
<div class="accordion-group" style="border:none">
<div class="accordion-heading text-center"><a class="accordion-toggle btn-flat btn-plain" data-toggle="collapse" href="#collapse2"><i class="icon-hand-right"></i> <!-- Title of accordian section --> </a></div>
<div class="accordion-body collapse" id="collapse2">
<div class="accordion-inner">
<p><!-- content for accordian section --></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Interactives-->
<!--fd4me-->
<!--Drag and drop to columns-->
<section class="fancy">
<article>
<header>
<h3><span>Sorting Activity</span></h3>
<h5>The Four Levels Of A Feedback Question</h5>
<p class="note">Drag the following levels under the correct columns below.&nbsp; When your choice is correct the background will turn green and the level will remain in the chosen column.</p>
</header>
<div class="drag_drop_matching pretty dd-spacing">
<div style="margin-left:4%;">
<div style="position: relative;" data-area="tasks" class="matching-drag ui-draggable">tasks</div>
<div style="position: relative; left: 0px; top: 0px;" data-area="process" class="matching-drag ui-draggable">process</div>
<div style="position: relative;" data-area="self_levels" class="matching-drag ui-draggable">self levels</div>
<div style="position: relative; left: 0px; top: 0px;" data-area="self-regulation" class="matching-drag ui-draggable">self-regulation</div>
</div>
&nbsp;
<div style="text-align:center" class="row-fluid">
<div class="span6">
<h5 class="column-header inverse">Most powerful areas for feedback</h5>
<div class="qp-4 force-h">
<div class="matching-drop area-process area-self-regulation ui-droppable">&nbsp;</div>
</div>
<div class="qp-4 force-h">
<div class="matching-drop area-process area-self-regulation ui-droppable">&nbsp;</div>
</div>
</div>
<div class="span6">
<h5 class="column-header inverse">Less powerful areas for feedback</h5>
<div class="qp-4 force-h">
<div class="matching-drop area-tasks area-self_levels ui-droppable">&nbsp;</div>
</div>
<div class="qp-4 force-h">
<div class="matching-drop area-tasks area-self_levels ui-droppable">&nbsp;</div>
</div>
</div>
</div>
</div>
</article>
</section>
<div class="expand-container">
<div class="expand-left-container">
<div class="expand-button">
<!-- Button Title -->
</div>
</div>
<div class="expand-right-container">
<div class="expand-right expand-list">
<ul>
<li>
<!-- Item -->
</li>
</ul>
</div>
</div>
</div>
<section class="fancy closer-look">
<article>
<header>
<h3><span>Case in Point </span></h3>
<h5><i>Henry</i></h5>
</header>
<img class="floatright" src="https://ogg.osu.edu/media/images/.jpg" />
<!-- Case in Point content -->
<p>Take a moment to enter your response&nbsp;to the question in the text box provided and click on &quot;Get Feedback&quot; to gain additional insight.</p>
<!-- Question -->
<div class="simple_interactive"><textarea class="span8" cols="70" rows="10"></textarea><br />
<a class="get_feedback btn btn-primary">Get Feedback</a>
<div class="feedback" style="display: block;">
<p><strong>Feedback:</strong></p>
<!-- Feedback -->
<a class="close" href="#">Close</a></div>
</div>
</article>
</section>
### Blue bar
<div class="accordion fit" data-center-heads="true">
<div class="accordion-group">
<div href="#collapse2" data-toggle="collapse" class="accordion-heading collapsed">
<div class="soften accordion-toggle">Risk Factors for AMD</div>
</div>
<div class="accordion-body collapse" id="collapse2">
<div class="accordion-inner slide-in-left">
<ul>
<li>Race (more common in Caucasian populations),</li>
<li>Smoking,</li>
<li>Obesity,</li>
<li>Gender (women are more likely to have AMD than men), and</li>
<li>Family history.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="expand-container">
<div class="expand-left-container">
<div class="expand-button">Problems setting up an eye appointment</div>
</div>
<div class="expand-right-container">
<div class="expand-right expand-list">
<ul>
<li>Lack of available health care providers nearby</li>
<li>Health care provider not accepting new patients</li>
<li>Insurance not accepted by provider</li>
<li>Delays in how soon they can get in to be seen</li>
</ul>
</div>
</div>
</div>
### Color bars
<div class="beveled-button-wrapper">
<div class="row-fluid button-group">
<div class="light-purple-bvld-button blvd-btn text-left"><span style="font-size:20px;"><strong><u>D</u></strong></span>esire to change statements indicate a clear desire for change but stop short of commitment.</div>
</div>
<div class="information">
<div class="row-fluid light-purple-button-bvld-info no-show info">
<div class="span12">
<div class="close-info-button">close</div>
<p><em>&lsquo;I wish things were different. I&rsquo;m hoping things will change.&rsquo; &lsquo;This is not the person I want to be.&rsquo;</em></p>
</div>
</div>
</div>
</div>
<section class="fancy exercise interactive memory-recall-interactive">
<article>
<header>
<h3>
<span>
Exercise
</span>
</h3>
</header>
<p style="text-align: center;"><span style="color:#000080;"><strong>Memory Check</strong></span></p>
<p>Try to memorize the list of 12 words presented below (Glucksberg &amp; Danks, 1975).&nbsp; Don&rsquo;t worry about the order of the words. Only the number of words you remember counts.&nbsp; Take about 20 seconds to memorize as many words as you can. When you are ready click the "Begin Exercise" button and type as many of the words from this list as you can remember.&nbsp; Don&rsquo;t read any further until you have tried to memorize the list of words.</p>
<hr>
<div class="word-list">
<div class="key">
<strong>Key:</strong> <span class="correct">Green</span> words are those that matched between the list and those you typed. <span class="incorrect">Red</span> words are those that did not match from either list.
</div>
<table>
<tbody>
<tr>
<td>Bed</td><td>Dream</td><td>Comfort</td>
</tr>
<tr>
<td>Rest</td><td>Awake</td><td>Sound</td>
</tr>
<tr>
<td>Wake</td><td>Night</td><td>Slumber</td>
</tr>
<tr>
<td>Tired</td><td>Eat</td><td>Snore</td>
</tr>
</tbody>
</table>
</div>
<div class="scratch-pad">
<textarea placeholder="Type in the words you remember, separated by a space" cols="60" rows="4" class="form-control"></textarea>
<button class="btn btn-default grade-exercise">Check Your Memory</button>
</div>
<hr>
<p>Don&rsquo;t read any further until you have tested your own memory.</p>
<button class="btn btn-default start-exercise">Begin Exercise</button>
</article>
</section>
<div class="interactive scoring-interactive" data-input="select" data-scoring="groupedItemsAddition">
<ol>
<li>I try to avoid conflicts whenever possible.
<select class="form-control" data-number="1" data-group="score-1">
<option disabled="disabled" selected="selected" value="">Select your answer</option>
<option value="1">1 - Always</option>
<option value="2">2 - Often</option>
<option value="3">3 - Sometimes</option>
<option value="3">4 - Rarely</option>
<option value="5">5 - Never</option>
</select>
</li>
</ol>
<div class="scores">
<h4>Your Scores: </h4>
<div class="your-scores" data-group="score-1" data-items="[1,8,12]">
<strong>Items 1, 8, 12:</strong> <span class="your-score">0</span>
</div>
</div>
<h5>Scoring:</h5>
<p>Scoring the Survey: Add your scores for items 1, 8, and 12. Your score will range from 3 to 15. The lower (closer to 3) your score, the more you tend to use withdrawal as a conflict management style.</p>
</div>
<div class="interactive scoring-interactive" data-input="select" data-scoring="negativeListening">
<ol>
<li>I listen differently depending on whether I am listening for enjoyment, understanding, or evaluation.
<select class="form-control" data-number="1">
<option disabled="disabled" selected="selected" value="">Select your answer</option>
<option value="5">5 - Almost Always</option>
<option value="4">4 - Often</option>
<option value="3">3 - Sometimes</option>
<option value="2">2 - Rarely</option>
<option value="1">1 - Never</option>
</select>
</li>
</ol>
<div class="score">
<h4>Your Score: <span class="your-score">0</span></h4>
</div>
<h5>Scoring:</h5>
<p>In this list even-numbered items indicate negative listening behaviors.&nbsp;The odd-numbered items indicate positive listening behaviors.&nbsp;There are 50 points possible.&nbsp;If you score over 40, you are effective in your listening.&nbsp;If you score below 40, identify which questions seemed to cause your lowest scores.&nbsp;You will want to give particular attention to the sections of the lesson that relate to these areas. (<span style="line-height: 22.8571px; background-color: rgb(255, 255, 255);">Adapted from Verderber, Verderber, and Berryman-Fink)</span></p>
</div>
<div id="modal1" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<img src="https://ogg.osu.edu/media/images/QA%20Capture.JPG" width="684" height="747" style="width: 684px; height: 747px; margin: 0 auto; display: block">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment