Skip to content

Commit 518a3d3

Browse files
aguavivaaguaviva
committed
using now bootstrap, also scaping database data
1 parent 2ea3b39 commit 518a3d3

File tree

8 files changed

+1066
-1032
lines changed

8 files changed

+1066
-1032
lines changed

‎BeliefExplorer.html

Lines changed: 220 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,220 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Belief Explorer</title>
7-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
8-
<link rel="stylesheet" href="mini-default.min.css">
9-
<!-- Global site tag (gtag.js) - Google Analytics -->
10-
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-3425939-8"></script>
11-
<script>
12-
13-
function gtag(){dataLayer.push(arguments);}
14-
15-
var Database = {};
16-
var locationNoVars = "";
17-
var variables = {}
18-
19-
function ProcessWithPush(sectionName, itemChosen)
20-
{
21-
history.pushState(sectionName, "", locationNoVars + "?q="+sectionName);
22-
Process(sectionName, itemChosen)
23-
}
24-
25-
function Process(sectionName, itemChosen)
26-
{
27-
gtag('event', 'page', {'id':sectionName});
28-
29-
variables[sectionName] = itemChosen;
30-
item = Database[sectionName];
31-
32-
$("#question").html(item.question.replace(/(<.*>)/, itemChosen))
33-
var a="<ul>";
34-
for(var key in item.answers)
35-
{
36-
var res = "";
37-
var match = key.match(/\$(.*)\$/);
38-
if (match!=null && match.length==2)
39-
res = match[1]
40-
41-
var answer = key.replace(/(\$)/g,"");
42-
var nextSectionName = item.answers[key];
43-
44-
var onClick = 'ProcessWithPush("'+nextSectionName+'", "'+res+'");return false;';
45-
46-
a+="<li>";
47-
if (Database[nextSectionName]!=undefined)
48-
a+="<a href=''onclick='"+onClick+"'>"+answer+"</a>";
49-
else
50-
a+="<div>"+answer+"</div>";
51-
a+="</li>";
52-
}
53-
a+="</ul>";
54-
$("#answers").html(a)
55-
}
56-
57-
window.onpopstate = function(event)
58-
{
59-
if (event.state!==null)
60-
Process(event.state, "");
61-
};
62-
63-
function Validate(itemName)
64-
{
65-
var orphan = []
66-
for(var key1 in Database)
67-
{
68-
var responses = Database[key1].answers
69-
for(var key2 in responses)
70-
{
71-
var dest = Database[responses[key2]]
72-
if (dest==undefined)
73-
orphan.push(responses[key2]);
74-
}
75-
}
76-
return orphan;
77-
}
78-
79-
$(document).ready(function()
80-
{
81-
window.dataLayer = window.dataLayer || [];
82-
gtag('js', new Date());
83-
gtag('config', 'UA-3425939-8');
84-
85-
var startingPoint = "0244388211625568";
86-
87-
splitUrl = window.location.href.split("?");
88-
locationNoVars = splitUrl[0]
89-
if (splitUrl.length==2)
90-
{
91-
startingPoint = splitUrl[1].split("=")[1];
92-
}
93-
94-
history.replaceState(startingPoint, "", locationNoVars + "?q="+startingPoint);
95-
96-
// Parse JSON
97-
//
98-
function processJSON(data)
99-
{
100-
if (data.res!="OK")
101-
{
102-
alert(data.res);
103-
return;
104-
}
105-
106-
Database = {}
107-
108-
var nodes = data["nodes"];
109-
for(var node in nodes)
110-
{
111-
var n = nodes[node];
112-
Database[n["id"]]={question:n["q"], answers:{}};
113-
}
114-
115-
var edges = data["edges"];
116-
for(var edge in edges)
117-
{
118-
var e = edges[edge];
119-
Database[e["s"]].answers[e["l"]] = e["t"];
120-
}
121-
122-
Validate(startingPoint);
123-
Process(startingPoint, "");
124-
}
125-
126-
$.ajax({
127-
type: "GET",
128-
url: "./SEMapDatabase.php",
129-
dataType: "json",
130-
success: function(data)
131-
{
132-
processJSON(data);
133-
},
134-
error: function(XMLHttpRequest, textStatus, errorThrown)
135-
{
136-
$.ajax({
137-
type: "GET",
138-
url: "./SEMap_en.json",
139-
dataType: "json",
140-
success: function(data)
141-
{
142-
processJSON(data);
143-
}
144-
});
145-
}
146-
});
147-
})
148-
149-
</script>
150-
</head>
151-
<body>
152-
<header class="sticky">
153-
<a href="#" class="logo">Belief Explorer</a>
154-
</header>
155-
<div class="container">
156-
<div class="row">
157-
<div class="col-sm"></div>
158-
<div class="col-lg-4 col-md-6 col-sm-12" style="height: calc(100vh - 10.25rem); display: flex; align-items: center; flex: 0 1 auto;">
159-
<form class="shadowed">
160-
<fieldset>
161-
<div id="question"></div>
162-
<br>
163-
<div class="input-group" id="answers"></div>
164-
</fieldset>
165-
</form>
166-
</div>
167-
<div class="col-sm"></div>
168-
</div>
169-
</div>
170-
171-
<footer class="sticky">
172-
<p>MIT License | <a href="#">About</a> | <a href="https://github.com/aguaviva/SEMap">Github code</a></p>
173-
</footer>
174-
</body>
175-
</html>
176-
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>Belief Explorer</title>
7+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
9+
<!-- Global site tag (gtag.js) - Google Analytics -->
10+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-3425939-8"></script>
11+
<style>body { background-color: gray; }</style>
12+
<script>
13+
14+
function gtag(){dataLayer.push(arguments);}
15+
16+
var Database = {};
17+
var locationNoVars = "";
18+
var variables = {}
19+
20+
function ProcessWithPush(sectionName, itemChosen)
21+
{
22+
history.pushState(sectionName, "", locationNoVars + "?q="+sectionName);
23+
Process(sectionName, itemChosen)
24+
}
25+
26+
function setQuestion(text, done)
27+
{
28+
var c = 1;
29+
var cursorBlinks=0;
30+
var cursorChar = "_";
31+
var id = setInterval(function () {
32+
33+
$("#question").html(text.substring(0, c) + cursorChar);
34+
if (text.length == c)
35+
{
36+
if((cursorBlinks&16)>0)
37+
$("#question").html(text + cursorChar);
38+
else
39+
$("#question").html(text);
40+
41+
cursorBlinks++;
42+
if (cursorBlinks>75)
43+
{
44+
clearInterval(id);
45+
$("#question").html(text);
46+
done();
47+
}
48+
}
49+
else
50+
{
51+
c++;
52+
}
53+
54+
}, 10);
55+
}
56+
57+
function addAnswer(answer, answerId)
58+
{
59+
res = "";
60+
var onClick = 'ProcessWithPush("'+answerId+'", "'+res+'");return false;';
61+
var a="";
62+
if (Database[answerId]!=undefined)
63+
a+="<a href='#' class='list-group-item list-group-item-action' onclick='"+onClick+"'>"+answer+"</a>";
64+
else
65+
a+="<a href=''onclick='"+onClick+"'>"+answer+"</a>";
66+
return a;
67+
}
68+
69+
function setAnswers(opacity)
70+
{
71+
var a="";
72+
for(var key in item.answers)
73+
{
74+
/*
75+
var res = "";
76+
var match = key.match(/\$(.*)\$/);
77+
if (match!=null && match.length==2)
78+
res = match[1]
79+
80+
var answer = key.replace(/(\$)/g,"");
81+
var nextSectionName = item.answers[key];
82+
*/
83+
a += addAnswer(key, item.answers[key])
84+
85+
}
86+
87+
$("#answers").html("<div style='opacity: "+opacity+";'>" + a + "</div>")
88+
}
89+
90+
function Process(sectionName, itemChosen)
91+
{
92+
gtag('event', 'page', {'id':sectionName});
93+
94+
variables[sectionName] = itemChosen;
95+
item = Database[sectionName];
96+
97+
setAnswers("0");
98+
99+
setQuestion(item.question.replace(/(<.*>)/, itemChosen), function()
100+
{
101+
setAnswers("1")
102+
});
103+
}
104+
105+
window.onpopstate = function(event)
106+
{
107+
if (event.state!==null)
108+
Process(event.state, "");
109+
};
110+
111+
function Validate(itemName)
112+
{
113+
var orphan = []
114+
for(var key1 in Database)
115+
{
116+
var responses = Database[key1].answers
117+
for(var key2 in responses)
118+
{
119+
var dest = Database[responses[key2]]
120+
if (dest==undefined)
121+
orphan.push(responses[key2]);
122+
}
123+
}
124+
return orphan;
125+
}
126+
127+
$(document).ready(function()
128+
{
129+
window.dataLayer = window.dataLayer || [];
130+
gtag('js', new Date());
131+
gtag('config', 'UA-3425939-8');
132+
133+
var startingPoint = "0244388211625568";
134+
135+
splitUrl = window.location.href.split("?");
136+
locationNoVars = splitUrl[0]
137+
if (splitUrl.length==2)
138+
{
139+
startingPoint = splitUrl[1].split("=")[1];
140+
}
141+
142+
history.replaceState(startingPoint, "", locationNoVars + "?q="+startingPoint);
143+
144+
// Parse JSON
145+
//
146+
function processJSON(data)
147+
{
148+
if (data.res!="OK")
149+
{
150+
alert(data.res);
151+
return;
152+
}
153+
154+
Database = {}
155+
156+
var nodes = data["nodes"];
157+
for(var node in nodes)
158+
{
159+
var n = nodes[node];
160+
Database[n["id"]]={question:n["q"], answers:{}};
161+
}
162+
163+
var edges = data["edges"];
164+
for(var edge in edges)
165+
{
166+
var e = edges[edge];
167+
Database[e["s"]].answers[e["l"]] = e["t"];
168+
}
169+
170+
Validate(startingPoint);
171+
Process(startingPoint, "");
172+
}
173+
174+
// try using a server, if not use static file
175+
$.ajax({
176+
type: "GET",
177+
url: "./SEMapDatabase.php",
178+
dataType: "json",
179+
success: function(data)
180+
{
181+
processJSON(data);
182+
},
183+
error: function(XMLHttpRequest, textStatus, errorThrown)
184+
{
185+
$.ajax({
186+
type: "GET",
187+
url: "./SEMap_en.json",
188+
dataType: "json",
189+
success: function(data)
190+
{
191+
processJSON(data);
192+
}
193+
});
194+
}
195+
});
196+
})
197+
198+
</script>
199+
</head>
200+
<body>
201+
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
202+
<a class="navbar-brand" href="">Navbar</a>
203+
</nav>
204+
205+
<div class=" d-flex align-items-center vh-100">
206+
<div class="container ">
207+
208+
<div class="card " style=" height:7rem" >
209+
<div class="card-body align-items-center d-flex ">
210+
<p class="card-text" id="question" ></p>
211+
</div>
212+
</div>
213+
<div style=" height:1rem" > </div>
214+
<div class="list-group" id="answers">
215+
</div>
216+
</div>
217+
</div>
218+
</body>
219+
</html>
220+

0 commit comments

Comments
 (0)