forked from robflaherty/quiz-generator
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
101 lines (73 loc) · 3.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FLowchart Quiz Generator</title>
<link href="source/stylesheets/quiz-generator.css" rel="stylesheet" />
<link href="source/stylesheets/quiz.css" rel="stylesheet" />
</head>
<body>
<div class="vox-logo">
<a href="http://www.voxmedia.com/"><img src="source/images/voxlogo.png" style="width:40px;"></a>
</div>
<div class="quiz-quartet">
<h1><img src="source/images/qq.png">Quiz Quartet</h1>
<div class="notice">
<p>This is a fork of a fork of Vox's <a href="https://github.com/voxmedia/quiz-generator">quiz generator tool</a>. It's forked from <a href="https://github.com/robflaherty/quiz-generator">this repo</a>.</p>
<p style="margin: 0;"><a href="#" id="show-instructions">Instructions</a></p>
</div>
</div>
<div class="container">
<div class="step" id="instructions">
<h5>Instructions</h5>
<ol>
<li><a href="source/stylesheets/flowchart.css">flowchart.css</a>.
<a href="source/stylesheets/quiz.css">quiz.css</a>,
<a href="source/javascripts/flowchart.js">flowchart.js</a> and
<a href="source/javascripts/quiz.js">quiz.js</a> and add all files to your site. jQuery is required, too.</li>
<li>Add additional CSS to match your site styles.</li>
<li>Follow the steps below.</li>
</ol>
</div>
<div class="step">
<h5>1. Choose a chart type</h5>
<form class="chart-type">
<span class="multiple-choice"><input type="radio" name="quiz-type" value="quiz"><label>Multiple Choice</label></span>
<span class="flowchart"><input type="radio" name="quiz-type" value="flowchart"><label>Flowchart</label></span>
</form>
</div>
<div class="step">
<h5>2. Enter your spreadsheet</h5>
<p><a href="#" id="help">Help?</a></p>
<div class="quiz-help">
<p>Use <a id="quiz-template" target="_new" href="">this Google Spreadsheet template</a> to write your quiz.</p>
<p>Once you're done editing, publish the spreadsheet to the web. Under the <b>"File"</b> menu, select <b>"Publish to the Web."</b> Click <b>"Start Publishing"</b> and copy the URL to build the quiz.</p>
<p>Want to test it out? Try this spreadsheet:</p>
<textarea style="overflow:auto;" rows="1" id="example-spreadsheet"></textarea>
</div>
<p>Copy and paste your spreadsheet's URL here:</p>
<input type="text" id="url">
<button id="build">Generate your quiz</button>
</div>
<div class="embed step">
<h5>3. Paste this code into the CMS</h5>
<textarea type="text" name="embedcode" id="embedcode" style="height: 150px; overflow:auto;"></textarea>
</div>
</div>
<div class="container preview">
<h5>Preview</h5>
<div class="quiz-preview">
<div class="quiz-container"></div>
</div>
</div>
<script src="source/javascripts/jquery.min.js"></script>
<script src="source/javascripts/tabletop.js"></script>
<script src="source/javascripts/getdata.js"></script>
<script src="source/javascripts/quiz.js"></script>
<script src="source/javascripts/flowchart.js"></script>
</body>
</html>