Skip to content

Instantly share code, notes, and snippets.

@beemyfriend
Last active July 23, 2017 18:02
Show Gist options
  • Select an option

  • Save beemyfriend/3399b12eae430cd1041991bb1311eed4 to your computer and use it in GitHub Desktop.

Select an option

Save beemyfriend/3399b12eae430cd1041991bb1311eed4 to your computer and use it in GitHub Desktop.
CoC Stepper
<head>
<style>
p, h1, h2, #joinus{
font-family: Georgia, Verdana, serif;
text-align: center;
}
html, body {
margin: 0;
height: 100%;
width: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<h1>Forcing You to read my Code of Conduct</h1>
<h2>Introduction</h2>
</body>
<script src = 'https://rawgit.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js'></script>
<script>
var body = d3.select('body');
function newText(txt, func){
body.append('p')
.html(txt);
body.on('click', func);
}
function newBody(head, func){
body.selectAll('p')
.remove();
body.selectAll('h2')
.remove();
body.append('h2')
.html(head);
func();
}
function joinus(){
body.selectAll('p')
.remove();
body.selectAll('h2')
.remove();
body.append('h2')
.html('Join Us!');
body.append('p')
.html('If you have read this CoC and agree to its contents, then click the button below to join us!');
body.on('click', console.log('nothing to do...'))
body.append('div#joinus')
.append('a')
.attr('href', 'http://google.com')
.append('button')
.html('relevant link');
}
var intro = 'click the screen to move on',
point1 = 'This is my first relevant point.',
point2 = 'This is my second relevant point.',
point3 = 'This is my penultimate point.',
point4 = 'This is my final point';
function start(){
newText(intro, point1f)
}
function point1f(){
newText(point1, point2f)
}
function point2f(){
newText(point2, page2)
}
function page2(){
newBody('New Page', point3f)
}
function point3f(){
newText(point3, point4f)
}
function point4f(){
newText(point4, joinus)
}
start();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment