ashlynnpai/Interactive-tutorial-on-US-copyright-law.markdown

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Copyright Tutorial</title>
    <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="wrapper">
<img src = http://imageshack.com/a/img841/8688/10tx.png>
<h1>Can I put this on my website?</h1>

<h3>This interactive tutorial on US copyright law is for educational purposes only and is not legal advice.</h3>
<br><br>
<p class="intro">Was the work first published before 1923?</p>
        <div class="buttonA">
        <button id="button1">YES</button>
        <button id="button2">NO</button>
        </div>
        <p class="alltext" id="text1">The work is most likely in the public domain.</p>
        <p class="alltext" id="text2">Was the work created by the US government?</p>
        <div class="buttonB">
        <button id="button3">YES</button>
        <button id="button4">NO</button>
        </div>
        <p class="alltext" id="text3">The work is most likely in the public domain.</p>
        <p class="alltext" id="text4">Do you have the consent of the copyright holder to            use the item, or was it deliberately placed into the public domain?</p>
        <div class="buttonC">
        <button id="button5">YES</button>
        <button id="button6">NO</button>
        </div>
        <p class="alltext" id="text5">Be sure to read the terms of the consent or license carefully.</p>
        <p class="alltext" id="text6">Consider whether you can make a fair use claim.  The <a href="http://www.law.cornell.edu/uscode/text/17/107" target="_blank">fair use doctrine</a> enables limited use of the material for commentary, criticism, education, etc.</p>
</div>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

## Interactive-tutorial-on-US-copyright-law.markdown

      
    Raw
  

              Interactive-tutorial-on-US-copyright-law.markdown
            
          
    Interactive tutorial on US copyright law

This is an educational tutorial on basic US copyright law.
A Pen by Ashlynn Pai on CodePen.
License.

  
## script.js


$("#button1").on("click", function(){
    $("#text1").show();
    $("#button2").remove();
});
$('#button2').on('click', function(){
    $('#text2').show();
    $('#button1').remove();
    $('#button3').show();
    $('#button4').show();
});
$('#button3').on('click', function(){
    $('#text3').show();
    $('#button4').remove();
});
$('#button4').on('click', function(){
    $('#text4').show();
    $('#button3').remove();
    $('#button5').show();
    $('#button6').show();
});
$('#button5').on('click', function(){
    $('#text5').show();
    $('#button6').remove();
});
$('#button6').on('click', function(){
    $('#text6').show();
    $('#button5').remove();
});

## style.css
body {
    font-family: 'Nunito', 'sans-serif';
    font-size: 22px;
    background-color: #E0F2F7;
}


.wrapper {
    max-width: 900px;
    margin: 100px auto;
    text-align: center; //centered buttons
}

img {
    float: left;
    margin-right: 10px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 18px;
}

button {
    font-family: 'Nunito', 'sans-serif';
    font-size: 32px;
    width: 150px;
    margin: 20px;
    padding: 10px;
    color: #fff;
    border-radius: 10px;
}

.alltext {
    text-align: center;
        display: none;
}

#button3, #button4, #button5, #button6 {
      display: none;
}

#button1, #button3, #button5    {
    background-color: #7BD673;
}

#button2, #button4, #button6    {
    background-color: #E47F7F;
}
#text1, #text3 {
    background-color: #7BD673;
}
#text6 {
    background-color: #F9F2A2;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Copyright Tutorial</title>
	<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
	</head>
	<body>
	<div class="wrapper">
	<img src = http://imageshack.com/a/img841/8688/10tx.png>
	<h1>Can I put this on my website?</h1>

	<h3>This interactive tutorial on US copyright law is for educational purposes only and is not legal advice.</h3>
	<br><br>
	<p class="intro">Was the work first published before 1923?</p>
	<div class="buttonA">
	<button id="button1">YES</button>
	<button id="button2">NO</button>
	</div>
	<p class="alltext" id="text1">The work is most likely in the public domain.</p>
	<p class="alltext" id="text2">Was the work created by the US government?</p>
	<div class="buttonB">
	<button id="button3">YES</button>
	<button id="button4">NO</button>
	</div>
	<p class="alltext" id="text3">The work is most likely in the public domain.</p>
	<p class="alltext" id="text4">Do you have the consent of the copyright holder to use the item, or was it deliberately placed into the public domain?</p>
	<div class="buttonC">
	<button id="button5">YES</button>
	<button id="button6">NO</button>
	</div>
	<p class="alltext" id="text5">Be sure to read the terms of the consent or license carefully.</p>
	<p class="alltext" id="text6">Consider whether you can make a fair use claim. The <a href="http://www.law.cornell.edu/uscode/text/17/107" target="_blank">fair use doctrine</a> enables limited use of the material for commentary, criticism, education, etc.</p>
	</div>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
	</body>
	</html>


	$("#button1").on("click", function(){
	$("#text1").show();
	$("#button2").remove();
	});
	$('#button2').on('click', function(){
	$('#text2').show();
	$('#button1').remove();
	$('#button3').show();
	$('#button4').show();
	});
	$('#button3').on('click', function(){
	$('#text3').show();
	$('#button4').remove();
	});
	$('#button4').on('click', function(){
	$('#text4').show();
	$('#button3').remove();
	$('#button5').show();
	$('#button6').show();
	});
	$('#button5').on('click', function(){
	$('#text5').show();
	$('#button6').remove();
	});
	$('#button6').on('click', function(){
	$('#text6').show();
	$('#button5').remove();
	});
	body {
	font-family: 'Nunito', 'sans-serif';
	font-size: 22px;
	background-color: #E0F2F7;
	}


	.wrapper {
	max-width: 900px;
	margin: 100px auto;
	text-align: center; //centered buttons
	}

	img {
	float: left;
	margin-right: 10px;
	}

	h2 {
	font-size: 22px;
	}

	h3 {
	font-size: 18px;
	}

	button {
	font-family: 'Nunito', 'sans-serif';
	font-size: 32px;
	width: 150px;
	margin: 20px;
	padding: 10px;
	color: #fff;
	border-radius: 10px;
	}

	.alltext {
	text-align: center;
	display: none;
	}

	#button3, #button4, #button5, #button6 {
	display: none;
	}

	#button1, #button3, #button5 {
	background-color: #7BD673;
	}

	#button2, #button4, #button6 {
	background-color: #E47F7F;
	}
	#text1, #text3 {
	background-color: #7BD673;
	}
	#text6 {
	background-color: #F9F2A2;
	}