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 class="titleSection">
  <div class="content slide active firstContent container-fluid title firstTitle">
    <div class="row">
      <div class="col-sm-12 titleHead">
        <h1>Citations &amp; Plagiarism</h1>
        <h2>Tim Miller &middot; twm2 &middot; 707.826.4959 &middot; Library 02 (Lower Level)</h2>
        <div class="attrib">
          <p>All text, html, css &amp; js <a rel="license" href="http://creativecommons.org/licenses/by/4.0/" class="imageLink"><img class="license" alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a> <a href="http://libguides.humboldt.edu/prf.php?account_id=55835" target="_blank" title="Profile for Tim Miller">Tim Miller</a></p>
          <p>All photos &copy; <a href="https://www.flickr.com/photos/humboldtstate" target="_blank" title="HSU Flickr site">Humboldt State University</a> </p>
          <p>Unless otherwise noted</p>
        </div>
      </div>
    </div>
  </div>
      <div class="transition"></div>
</section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>What do YOU want to know?</h2>
      <div class="row noBump">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
          <ul class="center bump embiggen">
            <li>Why did you come today?</li>
            <li>What class(es) are you taking that require citations?</li>
            <li>What style guide do you use for your discipline?</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>Goals</h2>
      <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
          <ul class="embiggen">
            <li>Examine the question:
"What is plagiarism?"</li>
            <li>Proper use of citations</li>
            <li>Quote &amp; Paraphrase</li>
            <li>Style Guide resources</li>
          </ul>
        </div>
        <div class="col-sm-3"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Style Guides</h2>
      <div class="row noBump">
        <div class="col-sm-1"></div>
        <div class="col-sm-5">
          <h3>More than just citations/references</h3>
          <ul>
            <li>formatting
              <ul>
                <li>margins</li>
                <li>line spacing</li>
                <li>pagination</li>
                <li>etc.</li>
              </ul>
            </li>
            <li>You are not expected to memorize- <strong>use resources</strong>!</li>
          </ul>
        </div>
        <div class="col-sm-5">
          <img src="https://c1.staticflickr.com/1/556/19946749856_cc819ff061_z.jpg" alt="Photo of the spines of several style guides" class="bump2">
        </div>
        <div class="col-sm-1"></div>
      </div>  
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Citation Basics</h2>
      <div class="row noBump">
        <div class="col-sm-1"></div>
        <div class="col-sm-5">
          <h3>Organization</h3>
          <ul>
            <li>save the citations when you <strong><em>find</em></strong> the article</li>
            <li>track which concepts come from which articles</li>
          </ul>
          <h3>Save from the database</h3>
          <ul>
            <li>Specific style format (APA, MLA, CSE, Chicago, etc)</li>
          </ul>
        </div>
        <div class="col-sm-5">
          <a href="https://scholar.google.com/scholar?hl=en&q=black+panther+party+breakfast+program&btnG=&as_sdt=1%2C5&as_sdtp=" target="_blank" title="Google Scholar search for 'black panther party breakfast program'"><img src="http://users.humboldt.edu/tmiller/images/citeExport.png" alt="Screen shot of Google Scholar citation export"></a>
          <a href="http://ezproxy.humboldt.edu/login?url=http://search.ebscohost.com/login.aspx?direct=true&db=aph&AN=37379510&site=ehost-live" target="_blank" title="Ebsco search for 'black panther party AND free breakfast program'"><img src="http://users.humboldt.edu/tmiller/images/citeExportEbsco.png" alt="Screen shot of Ebsco citation export" class="bump"></a>
        </div>
        <div class="col-sm-1"></div>
      </div>  
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10 center">
          <h2>Why Cite?</h2>
          <h3>Scholarship is conversation</h3>
          <img src="https://c1.staticflickr.com/9/8178/8065059102_eca44743ac_b.jpg" alt="" class="width60">
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Academic Conversation</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-6 bump">
          <ul>
            <li>'Author' &amp; 'Reader' are engaged in conversation</li>
            <li>Contribution to the knowledge-base</li>
            <li>Recognize &amp; build on the work of others</li>
            <li>Provide evidence &amp; support for your ideas</li>
            <li>Provide your readers with more information</li>
            <li>Make it easy for your readers to find your sources</li>
          </ul>
        </div>
        <div class="col-sm-4 bump">
          <a href="http://genius.com/Public-enemy-fight-the-power-lyrics" target="_blank" title="'Fight the Power' on Genius"><img src="https://consequenceofsound.files.wordpress.com/2015/04/20130616210656fear_of_a_black_planet.jpg?w=1200" alt="Public Enemy's 'Fear of a Black Planet' album cover" class="videoShow"></a>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content purple slide container-fluid title">
      <h2>Select the correct statement</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
         <div class="quizSet">
          <div class="firstQ quiz">
            <div class="correct">
              The same basic information is needed to reference a source in every citation style format.
            </div>
            <div class="incorrect">
              Each style format requires distinctly different information- the formats are not similar.
            </div>
          </div>
          <div class="secondQ quiz sr-only">
            <div class="incorrect">
              When citing a source you retrieve online, all you need is a URL.
            </div>
            <div class="correct">
              When citing a source you retrieve online, you need the same basic information as you do for print sources.
            </div>
          </div>
          <div class="thirdQ quiz sr-only">
            <div class="incorrect">
              If you write about an author’s idea without quoting them, you do not need to cite the source.
            </div>
            <div class="correct">
              When you use other authors' ideas, you need to cite them as sources.
            </div>
          </div>
          <div class="fourthQ quiz sr-only">
            <div class="correct">
              The primary purpose of citing your sources is to show your audience where you got your ideas.
            </div>
            <div class="incorrect">
              The primary purpose of citing your sources is to prove that you are not plagiarizing.
            </div>
          </div>
         </div>
        </div>
        <div class="col-sm-2"></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/tutobu" class="totobu" target="_blank"><span class="ion-arrow-right-a"></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;
}
​
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%;
}
​
.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.totobu {
  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;
}
​
.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 {
  font-size: 75%;
}
Output

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

Dismiss x
public
Bin info
sometimesmotionpro
0viewers