Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.5.5/jquery.smooth-scroll.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <title>Citations &amp; Plagiarism - SkillShop - Humboldt State University Library</title>
</head>
<body>
  
  <section>
    <div class="content slide container-fluid title">
      <h2>Anatomy of a Citation</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-5">
          <h3>Two parts:</h3>
          <ul>
            <li>in-text citation
              <ul>
                <li>in the body</li>
              </ul>
            </li>
            <li>reference list entry
              <ul>
                <li>at the end</li>
              </ul>
            </li>
          </ul>
          <p>The in-text citation refers the reader to the reference list for complete citation information.</p>
          <div class="btn-checkit"><a href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0077552" target="_blank" title="Example of an online scholarly article with references &amp; citations">Check it out!</a></div>
        </div>
        <div class="col-sm-5">
          <div class="imageCenter">
            <img src="http://users.humboldt.edu/tmiller/images/citePlain.png" alt="Screen shot of a passage from an article" class="width60">
          </div>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>In-text Citation - Parenthetical</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-5">
          <p>With the basic information, the reader can find the full citation at the end of the paper:</p>
          <ul>
            <li>Author name(s)</li>
            <li>Publication Date</li>
            <li>Page numbers</li>
          </ul>
        </div>
        <div class="col-sm-5">
          <ul class="whiteBk bump">
            <li>APA: (Nel, 2005, p. 805)</li>
            <li class="bump">MLA: (Nel, 805)</li>
            <li class="bump">CMS: (Nel 2005, 805)</li>
            <li class="bump">CSE: (Nel 2005)</li>
          </ul>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>In-text Citation - Footnote</h2>
      <div class="row bump">
        <div class="col-sm-1"></div>
        <div class="col-sm-5">
          <ul>
            <li>Instead of a parenthetical in-text citation, some styles allow or require the use of footnotes or endnotes. (Chicago &amp; CSE have this option) </li>
            <li>A numbered footnote/endnote is included in the text, which corresponds to the note which includes the full citation.</li>
          </ul>
        </div>
        <div class="col-sm-5">
          <img src="https://s3.amazonaws.com/media-p.slid.es/uploads/millrt138/images/865719/footnoteArrow.png" alt="Screen shot of an article with footnotes">
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Reference List Entry</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <h3>AKA: Works Cited, Bibliography, Literature Cited, Cited References, etc.</h3>
          <p>Full citation- With the following information, the reader should be able to find the article on her own.</p>
        </div>
        <div class="col-sm-2"></div>
      </div>
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4">
          <ul>
            <li>author name</li>
            <li>publication date</li>
            <li>article title</li>
            <li>journal title</li>
            <li>volume &amp; issue</li>
            <li>page number</li>
            <li>DOI or URL (e-articles)</li>
          </ul>
        </div>
        <div class="col-md-4 whiteBk smFont">
          <ul>
            <li>Nel, A.</li>
            <li>May 6, 2005</li>
            <li>Air pollution-related illness: Effects of particles</li>
            <li><em>Science</em></li>
            <li><em>308</em>(5723)</li>
            <li>804-806</li>
            <li class="smFont">http://www.jstor.org/stable/3841924</li>
          </ul>
        </div>
        <div class="col-md-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Reference List Entry Examples</h2>
      <div class="row bump">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
          <ul>
            <li>APA: Nel, A. (2005). Air pollution-related illness: Effects of particles. <em>Science</em>, <em>308</em>, 804-806.</li>
            <li class="bump">MLA: Nel, André. "Air Pollution-Related Illness: Effects of Particles." <em>Science</em>, 308.5723 (2005): 804-806.</li>
            <li class="bump">CMS: Nel, André. 2005. "Air Pollution-Related Illness: Effects of Particles." <em>Science</em>. 308, no. 5723: 804-806.</li>
            <li class="bump">CSE: Nel A. 2005 May 6. Air pollution-related illness: Effects of particles. Science (308): 804-06.</li>
          </ul>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>DOI &amp; URL</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
          <h3>DOI - Digital Object Identifier</h3>
          <p>unique alphanumeric code used to identify and locate an electronic article:</p>
          <p class="whiteBk center">10.1126/science.1108752 <br>http://doi.org/10.1126/science.1108752</p>
          <h3>URL - Uniform Resource Locator</h3>
          <p>address for a site or page on the worldwide web: </p>
          <p class="whiteBk center">http://www.jstor.org/stable/3841924</p>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Electronic Articles</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
          <h3>DOI is always preferred over URL</h3>
          <h3>Only use stable/permanent URLs</h3>
          <p>Each style has its own rules about when to include or not include a DOI or URL: </p>
          <ul>
            <li>MLA - No DOI/URL necessary 
              <ul>
                <li>include name of database &amp; date retrieved</li>
              </ul>
            </li>
            <li>APA - Include DOI/URL if different from print version
              <ul>
                <li>do not include name of database or date retrieved</li>
              </ul>
            </li>
            <li>Chicago - Always include DOI/URL
              <ul>
                <li>incl db name if no stable URL, incl date retrieved</li>
              </ul>
            </li>
            <li>CSE - Always include DOI/URL
              <ul>
                <li>include name of database &amp; date retrieved</li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>How often should you cite?</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
          <ul>
            <li>APA: every time you use an idea from another source</li>
            <li>MLA: not necessarily every sentence
              <ul>
                <li>Be clear - use a citation if necessary
                  <ul>
                    <li>use page #s for multiple references in one citation:  (Miller 25, 113)  at the end of a paragraph</li>
                    <li>OR mention author's name once, but incl. page # in parentheses after every reference</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>CMS: not necessarily every sentence
              <ul>
                <li>place citation at end of paragraph</li>
                <li>page # at end of each sentence</li>
              </ul>
            </li>
            <li>CSE: use one citation, be creative with wording</li>
          </ul>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Long Quotations</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
          <div class="imageCenter">
            <img src="https://s3.amazonaws.com/media-p.slid.es/uploads/millrt138/images/894395/blockQuoteSample.png" alt="" class="width60">
          </div>
          <ul>
            <li>For longer quotations, place the quotation in a block, indented 1/2" (APA, CMS &amp; CSE) or 1" (MLA).</li>
            <li>Other formatting such as line spacing and use of quotation marks varies across styles.</li>
          </ul>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Reference List</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
          <ul>
            <li>New page (insert page break)</li>
            <li>Title:
              <ul>
                <li>APA: References</li>
                <li>MLA: Works Cited</li>
                <li>CMS: Bibliography (&amp; others)</li>
                <li>CSE: References/Cited References/Literature Cited</li>
              </ul>
            </li>
            <li>Hanging indent - 1/2" </li>
            <li>Order:
              <ul>
                <li>Prenthetical: Alphabetized - main author last name</li>
                <li>Footnotes: Order of appearance</li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>References - example</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
          <div class="imageCenter bump">
            <img src="https://s3.amazonaws.com/media-p.slid.es/uploads/millrt138/images/765988/refPageClip.png" alt="Screen shot of hanging indent" class="width80 clicky clickyImg">
            <img src="https://s3.amazonaws.com/media-p.slid.es/uploads/millrt138/images/766021/refPageClip2.png" alt="Screen shot of hanging indent" class="width80 sr-only">
          </div>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Google Docs - Hanging Indent</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10 center">
          <img src="https://s3.amazonaws.com/media-p.slid.es/uploads/millrt138/images/780099/Google_Docs_hanging_indent.gif" alt="Animated GIF of creating hanging indents with Google Docs" class="width80">
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>MS Word - Hanging Indent</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10 center">
          <img src="https://s3.amazonaws.com/media-p.slid.es/uploads/millrt138/images/780092/MS_Word_hanging_indent.gif" alt="Animated GIF of creating hanging indents with MS Word" class="width80">
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Resources</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
          <ul>
            <li>Library Research Guides
              <ul>
                <li><a href="http://libguides.humboldt.edu/cite" target="_blank" title="HSU Library's citation guide">http://libguides.humboldt.edu/cite</a></li>
              </ul>
            </li>
            <li>OWL Purdue Online Writing Lab
              <ul>
                <li><a href="https://owl.english.purdue.edu/owl/section/2/" target="_blank" title="Purdue Online Writing Lab style guides">https://owl.english.purdue.edu/owl/section/2/</a></li>
              </ul>
            </li>
            <li>HSU Library Zotero Guide
              <ul>
                <li><a href="http://libguides.humboldt.edu/zotero" target="_blank" title="HSU Library Zotero guide">http://libguides.humboldt.edu/zotero</a></li>
              </ul>
            </li>
            <li>HSU Writing Studio
              <ul>
                <li><a href="https://www2.humboldt.edu/learning/writing_center/index.php" target="_blank" title="HSU Writing Studio">https://www2.humboldt.edu/learning/writing_center/index.php</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  
  <!--
​
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2></h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10"></div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
​
  -->
  
  <a href="" class="arrow"><span class="ion-chevron-down"></span><span class="hidden">Next</span></a>
  <a href="https://output.jsbin.com/nawaru" class="nawaru" target="_blank"><span class="ion-ios-home-outline"></span><span class="hidden">Next</span></a>
  <div id="fullscreen"><span class="ion-arrow-expand"></span><span class="sr-only">Full screen</span></div>
  
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="">  
    </div>
  </div>
  
</body>
</html>
 
@import url(//fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(//fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,300);
​
html {
  font-size: 22px;
}
​
body {
  background: #1E824C;
  font-family: roboto;
  color: #fff;
  position: relative;
}
​
h1 {
  color: #000;
  font-size: 5rem;
  font-family: roboto;
  margin-top: 20px;
  text-align: left;
}
​
h2 {
  text-align: center;
  font-family: oswald;
}
​
.titleSection .content h2 {
  text-align: left;
  color: #000;
  font-size: 2rem;
}
​
.titleHead {
  position: absolute;
  top: 0;
}
​
.content h2 {
  font-size: 4rem;
  margin-top: 0;
}
​
.cc {
  font-size: 1vw;
  color: #fff;
}
​
a {
  color: #fff;
  text-decoration: none;
  border-bottom: 4px solid rgba(255,255,255,0.5);
}
​
a:link, a:hover, a:visited, a:active {
  color: #fff;
  text-decoration: none;
  border-bottom: 4px solid rgba(255,255,255,0.5);
}
​
a:hover {
  border-bottom: 4px solid rgba(255,255,255,0.9);
  text-decoration: none;
}
​
.attrib {
  text-align: left;
  color: #000;
  font-size: 1rem;
}
​
.attrib a {
  text-decoration: none;
  border: none;
  color: #00396F;
}
​
.attrib a:hover {
  border: none; 
  color: #333;
}
​
img.license {
  border: none;
  border-radius: 0;
  width: 6vw;
}
​
h3 {
  font-family: roboto;
  font-size: 2rem;
  font-weight: 700;
}
​
h4 {
  font-family: roboto;
}
​
p {
  font-size: 1.75rem;
}
​
ul {
  font-weight: 700;
  list-style-type: none;
  font-size: 1.75rem;
}
​
ol {
  font-weight: 700;
}
​
ol>li {
  padding-left: 0;
}
​
li {
  font-weight: 400;
  padding-left: 1em;
  text-indent: -1em;
}
​
dl {
  padding: 1em 2em;
}
​
dt {
  font-size: 3rem;
}
​
dd {
  font-size: 2rem;
  padding-left: 2em;
  text-indent: -1em;
}
​
.sectionA {
  background-image: url("https://c1.staticflickr.com/9/8508/8580654507_0581f07d4b_o.jpg");
  background-position: center;
}
​
.sectionB {
  background-image: url("https://c2.staticflickr.com/6/5458/17225593305_209b316f52_k.jpg");
  background-position: center top;
}
​
.sectionC {
  background-image: url("https://c1.staticflickr.com/3/2931/13992140310_c4b404ca5d_k.jpg");
  background-position: center top;
}
​
.sectionD {
  background-image: url("https://c2.staticflickr.com/6/5156/13992117479_10cdc64939_k.jpg");
  background-position: center;
}
​
.sectionE {
  background-image: url("https://c2.staticflickr.com/6/5756/23208425344_4dd3c2c3c3_k.jpg");
  background-position: center top;
}
​
.titleSection {  
  background: url(https://c2.staticflickr.com/8/7442/14164617346_3c00357209_o.jpg);
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-bottom: 0;
  filter: grayscale(100%);
}
​
section {
  position: relative;
  background-attachment: fixed;
}
​
.content {
  background: rgba(30, 130, 76, 0.9);
  border-top: 10px solid rgba(30, 130, 76, 1);
  border-bottom: 10px solid rgba(30, 130, 76, 1);
}
​
.content.purple {
  background: rgba(103, 78, 167,0.9);
  border-top: 10px solid rgba(103, 78, 167, 1);
  border-bottom: 10px solid rgba(103, 78, 167, 1);
}
​
blockquote, .quiz div blockquote {
  font-size: 1.75rem;
  border: none;
  background: rgba(0,0,0,0.4);
  border-radius: 5px;
  text-align: left;
}
​
.row {
  padding-top: 1em;
}
​
img {
  width: 100%;
}
​
.imageCenter {
  text-align: center;
}
​
img.width60 {
  width: 60%;
}
​
img.width80 {
  width: 80%;
  margin-top: -1px;
}
​
.firstContent {
  background: none;
}
​
.firstTitle {
  text-align: right;
  background: rgba(255,255,255,0.5);
  position: absolute;
  width: 100%;
  border-top: none;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 10%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(255,255,255,1) 10%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
​
}
​
.parallax {
  background: transparent;
  height: 10px;
  width: 100%;
}
​
a.arrow:hover {
  background: rgba(57, 57, 57,0.7);
  color: #fff;
}
​
a.arrow {
  position: fixed;
  bottom: 0.5vw;
  text-align: center;
  left: 47%;
  width: 4.5vw;
  height: 4.5vw;
  border-radius: 500px;
  line-height: 1.5;
  font-size: 3vw;
  border: 4px solid rgb(50,50,50);
  background: rgba(255, 255, 255,0.4);
  color: rgba(50,50,50,1);
  z-index: 1001;
}
​
a.nawaru {
  position: fixed;
  bottom: 0.5vw;
  text-align: center;
  left: 47%;
  width: 4.5vw;
  height: 4.5vw;
  border-radius: 500px;
  line-height: 0.4;
  font-size: 4vw;
  border: none;
  background: none;
  color: #fff;
  z-index: 1001;
  display: none;
}
​
.titleSlide a.arrow {
  bottom: -0.5em;
  background: rgba(255, 255, 0, 0.7);
  font-size: 4vw;
  height: 100px;
  width: 100px;
  line-height:1.5;
}
​
a.arrow.end {
  font-size: 4vw;
  color: #fff;
  line-height: 0.4;
  background: none;
  border: none;
  bottom: 0.5em
}
​
a.arrow.end:hover {
  color: rgba(255, 255, 0, 1);
}
​
#fullscreen {
  position: fixed;
  bottom: 3%;
  right: 1%;
  text-align: center;
  line-height: 1;
  font-size: 3vw;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  color: rgba(255, 255, 255, 1);
  background: rgba(31, 31, 31, 0.5);
}
​
#fullscreen:hover {
  cursor: pointer;
}
​
.btn-checkit a {
  background: #4285F4;
  border: 5px solid #fff;
  border-radius: 15px;
  color: #fff;
  font-size: 4rem;
  text-align: center;
  padding: 5px 25px;
}
​
.btn-checkit a:hover {
  background: #75a2ea;
}
​
.pointer {
  cursor: pointer;
}  
​
.center {
  text-align:center;
}
​
.bump {
  margin-top: 2em;
}
​
.bump2 {
  margin-top: 4em;
}
​
.lilBump {
  margin-top: 0.5em;
}
​
.noBump {
  padding-top: 0;
}
​
.embiggen {
  font-size: 4em;
}
​
.progress {
  position: fixed;
  bottom: -2px;
  width: 100%;
  height: 14px;
  border-radius: 0;
  margin-bottom: 0;
}
​
.progress-bar {
  font-size: 14px !important;
  line-height: 0.95 !important;
  text-align: left;
}
​
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
​
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 80%;
}
​
.quiz div {
  font-size: 1.7rem;
  background: #ddd;
  color: #333;
  border-radius: 20px;
  padding: 5px 10px;
  margin-bottom: 5px;
  cursor: pointer;
}
​
.quiz.blockquote div {
  border: none;
  color: #fff;
  background: none;
  text-align: left;
}
​
.quiz div.right {
  background: rgb(76, 175, 80);
  color: #fff;
  border: 4px solid #fff;
  text-align: center;
}
​
.quiz.blockquote div.right {
  background: none;
  border: none;
  text-align: left;
}
​
.quiz.blockquote div.right blockquote {
  background: rgb(76, 175, 80);
  color: #fff;
  border: 4px solid #fff;
}
​
.quiz div.wrong {
  color: #CC181E;
  text-decoration: line-through;
}
​
.quiz.blockquote div.wrong {
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
}
​
.quiz.blockquote div.wrong blockquote {
  background: #CC181E;
  color: #fff;
  text-decoration: line-through;
  border: 4px solid #fff;
}
​
.hinge {
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 2s;
}
​
.link {
  font-size: 2rem;
}
​
.clicky {
  cursor: pointer;
}
​
.blueBk {
  background: #167AC6;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 5px;
}
​
.whiteBk {
  background: #fff;
  color: #000;
  border-radius: 5px;
  padding: 0.5em;
}
​
.green {
  font-weight: bold;
  color: #00ff00;
}
​
.highLight {
  background: rgba(63, 132, 252, 0.5);
}
​
.smFont, .smFont li {
  font-size: 75%;
}
 
$(function(){
  
//set the slide heights for screen optimization  
  var height = $(window).height();
  function resize(){
    height = $(window).height();
    $('.content').css('height', height);
    $('.titleSection').css('height', height);
    $('.parallax').css('height', height*0.3);
    //console.log('content ht: '+height);
    //console.log('parallax ht: '+height*0.3);
  }
  resize();
      
//iterate through each slide and set the id and background  
  $( ".slide" ).each(function( index ) {
  
//auto-assign id to each slide in the format 'slide1'  
    index = index+1;
    var slideId = 'slide'+index;
    var nextId = index+1;
    $(this).attr('id',slideId);
    $(this).addClass(slideId);
​
//auto-assign background to parallax sections  
    var digit = index.toString();
    digit = digit[digit.length -1];
    if((digit == '2') || (digit == '7')){
       $(this).closest("section").addClass('sectionA');
    } else if((digit == '3') || (digit == '8')){
       $(this).closest("section").addClass('sectionB');
    } else if((digit == '4') || (digit == '9')){
       $(this).closest("section").addClass('sectionC');
    } else if((digit == '5') || (digit == '0')){
       $(this).closest("section").addClass('sectionD');
    } else if((digit == '6') || (digit == '1')){
       $(this).closest("section").addClass('sectionE');
    }
​
  });//end slide each 
  
//progress bar fxn
  function moveProgress(){
  //get slide ct 
    var slideCt = $('.slide').length;
  //console.log('SlideCt: '+slideCt);
    var presentSlide = $('.slide.active');
    var presentSlideNo = $('.slide').index(presentSlide);
  //console.log("Present slide: "+presentSlideNo);
    presentSlideNo = presentSlideNo+1;
  //console.log(presentSlideNo+" of "+slideCt);
    var progress = '';
    progress = (100/slideCt)*(presentSlideNo);
  //console.log(progress+"% complete"); 
    $('.progress-bar').attr('aria-valuenow',progress); 
    $('.progress-bar').text('Slide '+presentSlideNo+' of '+slideCt); 
    var progRound = Math.round(progress);
    //$('.progress-bar').find('span').text('Slide '+presentSlideNo+' of '+slideCt);
    $('.progress-bar').css('width',progress+'%');
    $('.progress-bar').attr('title',presentSlideNo+" of "+slideCt);
    var nextSlideNo = presentSlideNo+1;
  //console.log("Next slide: "+nextSlideNo);
    var nextAnchor = '#slide'+nextSlideNo;
  //console.log("Next anchor: "+nextAnchor);
    $('a.arrow').attr('href',nextAnchor);
    if(progress > 99.9){
      $('.progress-bar').css('background','#D9534F');
      $('a.arrow').find('.ion-chevron-down').removeClass('ion-chevron-down').addClass('ion-ios-home-outline');
      $('a.arrow').addClass('sr-only');
      $('a.nawaru').show();
    } else {
      $('.progress-bar').css('background','#375A7F'); 
      $('a.arrow').find('.ion-ios-home-outline').removeClass('ion-ios-home-outline').addClass('ion-chevron-down');     
      $('a.arrow').removeClass('end');
      $('a.nawaru').hide();
      $('a.arrow').removeClass('sr-only');
    }
  }
    
//Change the hash to reflect the active slide id  
  function moveHash() {
    var activeNo = $('.slide.active').attr('id');
  //console.log('active slide: '+activeNo);
    window.history.pushState("Slide "+activeNo,"Slide number "+activeNo,"#"+activeNo);
  }  
  
//active slide changes with scroll   
  $(window).scroll(function() {
    var scrollMiddle = $(window).scrollTop() + (height/10);
    $('[id^="slide"]').each(function() {
      elTop = $(this).offset().top;
      elBtm = elTop + $(this).height();
      if (elTop < scrollMiddle && elBtm > scrollMiddle) {
        $('.slide').removeClass('active');
        $(this).closest('.slide').addClass('active');        
        moveProgress();
        moveHash();
      } 
    });
  }); // borrowed from http://jsfiddle.net/j2ULW/1/
​
  
  
//set up keyboard functionality [IN THE WORKS] 
  function moveSomething(e) {
    
    if(event.keyCode == 37){ //next
      alert("right");
      moveProgress();
      moveHash();
    } else if (event.keyCode == 39) { //prev
      
    }
  }
  
  window.addEventListener("keydown", checkKeyPressed, false);
 
function checkKeyPressed(e) {
    var nextSlide = $('.slide.active').closest('section').next('section').find('.slide').attr('id');
    nextSlide = "#"+nextSlide;
    //console.log('Next slide: '+nextSlide);
    var prevSlide = $('.slide .active').prev('.slide').attr('id');
    prevSlide = "#"+prevSlide;
    if (e.keyCode == "39") {  //right arrow
  //alert(nextSlide);
      //$('.active').removeClass('active');
      //$(nextSlide).addClass('active');
      //moveHash();
      //moveProgress();
    }
}
  
  moveProgress(); //set at page load
    
//arrow click fxn
  $("a.arrow").click(function(event) {
    event.preventDefault();
    moveProgress();
  });//end arrow click fxn
  
  
  //////////////////////////////////////
//////////////////////////////////////
//////////////////////////////////////
//////////////////////////////////////
​
  (function($) {
  var version = '1.5.5',
      optionOverrides = {},
      defaults = {
        exclude: [],
        excludeWithin:[],
        offset: 0,
​
        // one of 'top' or 'left'
        direction: 'top',
​
        // jQuery set of elements you wish to scroll (for $.smoothScroll).
        //  if null (default), $('html, body').firstScrollable() is used.
        scrollElement: null,
​
        // only use if you want to override default behavior
        scrollTarget: null,
​
        // fn(opts) function to be called before scrolling occurs.
        // `this` is the element(s) being scrolled
        beforeScroll: function() {},
​
        // fn(opts) function to be called after scrolling occurs.
        // `this` is the triggering element
        afterScroll: function() {},
        easing: 'swing',
        speed: 3000,
​
        // coefficient for "auto" speed
        autoCoefficient: 2,
​
        // $.fn.smoothScroll only: whether to prevent the default click action
        preventDefault: true
      },
​
      getScrollable = function(opts) {
        var scrollable = [],
            scrolled = false,
            dir = opts.dir && opts.dir === 'left' ? 'scrollLeft' : 'scrollTop';
​
        this.each(function() {
​
          if (this === document || this === window) { return; }
          var el = $(this);
          if ( el[dir]() > 0 ) {
            scrollable.push(this);
          } else {
            // if scroll(Top|Left) === 0, nudge the element 1px and see if it moves
            el[dir](1);
            scrolled = el[dir]() > 0;
            if ( scrolled ) {
              scrollable.push(this);
            }
            // then put it back, of course
            el[dir](0);
          }
        });
​
        // If no scrollable elements, fall back to <body>,
        // if it's in the jQuery collection
        // (doing this because Safari sets scrollTop async,
        // so can't set it to 1 and immediately get the value.)
        if (!scrollable.length) {
          this.each(function() {
            if (this.nodeName === 'BODY') {
              scrollable = [this];
            }
          });
        }
​
        // Use the first scrollable element if we're calling firstScrollable()
        if ( opts.el === 'first' && scrollable.length > 1 ) {
          scrollable = [ scrollable[0] ];
        }
​
        return scrollable;
      };
​
  $.fn.extend({
    scrollable: function(dir) {
      var scrl = getScrollable.call(this, {dir: dir});
      return this.pushStack(scrl);
    },
    firstScrollable: function(dir) {
      var scrl = getScrollable.call(this, {el: 'first', dir: dir});
      return this.pushStack(scrl);
    },
​
    smoothScroll: function(options, extra) {
      options = options || {};
​
      if ( options === 'options' ) {
        if ( !extra ) {
          return this.first().data('ssOpts');
        }
        return this.each(function() {
          var $this = $(this),
              opts = $.extend($this.data('ssOpts') || {}, extra);
​
          $(this).data('ssOpts', opts);
        });
      }
​
      var opts = $.extend({}, $.fn.smoothScroll.defaults, options),
          locationPath = $.smoothScroll.filterPath(location.pathname);
​
      this
      .unbind('click.smoothscroll')
      .bind('click.smoothscroll', function(event) {
        var link = this,
            $link = $(this),
            thisOpts = $.extend({}, opts, $link.data('ssOpts') || {}),
            exclude = opts.exclude,
            excludeWithin = thisOpts.excludeWithin,
            elCounter = 0, ewlCounter = 0,
            include = true,
            clickOpts = {},
            hostMatch = ((location.hostname === link.hostname) || !link.hostname),
            pathMatch = thisOpts.scrollTarget || ( $.smoothScroll.filterPath(link.pathname) === locationPath ),
            thisHash = escapeSelector(link.hash);
​
        if ( !thisOpts.scrollTarget && (!hostMatch || !pathMatch || !thisHash) ) {
          include = false;
        } else {
          while (include && elCounter < exclude.length) {
            if ($link.is(escapeSelector(exclude[elCounter++]))) {
              include = false;
            }
          }
          while ( include && ewlCounter < excludeWithin.length ) {
            if ($link.closest(excludeWithin[ewlCounter++]).length) {
              include = false;
            }
          }
        }
​
        if ( include ) {
​
          if ( thisOpts.preventDefault ) {
            event.preventDefault();
          }
​
          $.extend( clickOpts, thisOpts, {
            scrollTarget: thisOpts.scrollTarget || thisHash,
            link: link
          });
​
          $.smoothScroll( clickOpts );
        }
      });
​
      return this;
    }
  });
​
  $.smoothScroll = function(options, px) {
    if ( options === 'options' && typeof px === 'object' ) {
      return $.extend(optionOverrides, px);
    }
    var opts, $scroller, scrollTargetOffset, speed, delta,
        scrollerOffset = 0,
        offPos = 'offset',
        scrollDir = 'scrollTop',
        aniProps = {},
        aniOpts = {};
​
    if (typeof options === 'number') {
      opts = $.extend({link: null}, $.fn.smoothScroll.defaults, optionOverrides);
      scrollTargetOffset = options;
    } else {
      opts = $.extend({link: null}, $.fn.smoothScroll.defaults, options || {}, optionOverrides);
      if (opts.scrollElement) {
        offPos = 'position';
        if (opts.scrollElement.css('position') === 'static') {
          opts.scrollElement.css('position', 'relative');
        }
      }
    }
​
    scrollDir = opts.direction === 'left' ? 'scrollLeft' : scrollDir;
​
    if ( opts.scrollElement ) {
      $scroller = opts.scrollElement;
      if ( !(/^(?:HTML|BODY)$/).test($scroller[0].nodeName) ) {
        scrollerOffset = $scroller[scrollDir]();
      }
    } else {
      $scroller = $('html, body').firstScrollable(opts.direction);
    }
​
    // beforeScroll callback function must fire before calculating offset
    opts.beforeScroll.call($scroller, opts);
​
    scrollTargetOffset = (typeof options === 'number') ? options :
                          px ||
                          ( $(opts.scrollTarget)[offPos]() &&
                          $(opts.scrollTarget)[offPos]()[opts.direction] ) ||
                          0;
​
    aniProps[scrollDir] = scrollTargetOffset + scrollerOffset + opts.offset;
    speed = opts.speed;
​
    // automatically calculate the speed of the scroll based on distance / coefficient
    if (speed === 'auto') {
​
      // $scroller.scrollTop() is position before scroll, aniProps[scrollDir] is position after
      // When delta is greater, speed will be greater.
      delta = aniProps[scrollDir] - $scroller.scrollTop();
      if(delta < 0) {
        delta *= -1;
      }
​
      // Divide the delta by the coefficient
      speed = delta / opts.autoCoefficient;
    }
​
    aniOpts = {
      duration: speed,
      easing: opts.easing,
      complete: function() {
        opts.afterScroll.call(opts.link, opts);
      }
    };
​
    if (opts.step) {
      aniOpts.step = opts.step;
    }
​
    if ($scroller.length) {
      $scroller.stop().animate(aniProps, aniOpts);
    } else {
      opts.afterScroll.call(opts.link, opts);
    }
  };
​
  $.smoothScroll.version = version;
  $.smoothScroll.filterPath = function(string) {
    string = string || '';
    return string
      .replace(/^\//,'')
      .replace(/(?:index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  };
​
  // default options
  $.fn.smoothScroll.defaults = defaults;
​
  function escapeSelector (str) {
    return str.replace(/(:|\.|\/)/g,'\\$1');
  }
​
})(jQuery);
  
  
      $('a.arrow').smoothScroll();
​
      $('a.arrow').click(function(event) {
        event.preventDefault();
        var link = this;
        $.smoothScroll({
          scrollTarget: link.hash
        });
      });
​
      $('#change-speed').on('click', function() {
        var $p1 = $('a.arrow').first(),
            p1Opts = $p1.smoothScroll('options') || {};
​
        p1Opts.speed = p1Opts.speed === 1400 ? 400 : 1400;
        $p1.smoothScroll('options', p1Opts);
      });
  
//Fullscreen goodness  
 function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}
​
  
function toggleIcon(){
  $("#fullscreen").find('.ion-arrow-expand').toggleClass("ion-arrow-shrink");
}
  
$("#fullscreen").click(function() {
  toggleFullScreen();
  toggleIcon();
  setTimeout(resize, 100);
});
  
  //Quiz questions
    //right answers
  $('.quiz').find('.correct').last().addClass('lastQ');
    $('.correct').click(function(){
      $(this).addClass('right');
      $(this).parent().find('.incorrect').addClass('wrong').addClass('animated hinge').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        function(){
        $(this).parent().next('.quiz').removeClass('sr-only').addClass('animated rollIn');
        $(this).remove();
      });
    });
  //wrong answers
    $('.incorrect').click(function(){
      $(this).addClass("wrong");
    });
​
  $('.clickyShake').click(function(){
    $(this).addClass('animated shake blueBk');
  });
​
  $('.clickyImg').click(function(){
    $(this).next().removeClass('sr-only');
  });
  
  
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sometimesmotionpro
0viewers