-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (111 loc) · 5.77 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animals prolog</title>
<link rel="icon" href="./icons/logo.png">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="./style.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script type="text/javascript" src="./js/main.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/tau-prolog.js"></script>
<script type="text/javascript" src="./js/draw-derivation-trees.js"></script>
<script type="text/javascript" src="./js/expert_system.js"></script>
</head>
<body>
<div id="sectioner">
<div id="information-div">
<div id="subinfo-div">
<h1>Animals prolog</h1>
<p id="mobile_w">This is a pc intended experience</p>
<br/>
</div>
<span id="information">
<p style="font-size: 0.7em;">This is an application that uses tau prolog to implement a simple expert system about animal characteristics</p>
<div class="mainBtns unselectable" id="moreinfo-button" onclick="toggle_info()">
<img src="./icons/info.png" width="25px">
<span>Show/Hide information</span>
</div>
</span>
</div>
<div id="main-div">
<!-- Tab links -->
<div class="tab">
<button id="basic-tab" class="tablinks" onclick="showTab(event, 'basic')">Basic questions</button>
<button class="tablinks" onclick="showTab(event, 'wah')">Which animal has?</button>
<button class="tablinks" onclick="showTab(event, 'kam')">Knowledge acquisition module</button>
</div>
<div id="tabParent">
<!-- Tab content -->
<div id="basic" class="tabcontent">
<h4>List characteristics of an animal</h4>
<p>
Select animal:
<select class="classic" name="select_animal" id="select_animal">
<option value="dog">dog</option>
</select>
<span class="btn success" onclick="searchAnimalCarac()">Search</span>
</p>
<hr>
<h4>List characteristics of a class</h4>
<p>
Select class:
<select class="classic" name="select_class" id="select_class">
<option value="dog">dog</option>
</select>
<span class="btn success" onclick="searchClassCarac()">Search</span>
</p>
<hr>
<div id="result_basic">
</div>
</div>
<div id="wah" class="tabcontent">
<h3>Select characteristics of the animal you want to search</h3>
<select id="select_carac" class="js-example-basic-multiple" name="caracs[]" multiple="multiple" style="width: 80%">
</select>
<span class="btn success" onclick="searchAnimals()">Search</span>
<hr>
<div id="result_animals" style="height: 75vh; overflow-y: scroll;">
</div>
</div>
<div id="kam" class="tabcontent">
<h3>Knowledge acquisition module</h3>
<p style="margin-bottom: 50px; margin-top: 30px;"><span class="btn success" onclick="createAnimal()">Create animal</span></p>
<p>Insert the name of the animal: <input type="text" name="animal_name" id="animal_name_txt"></p>
<p>Select the class of the animal:
<select class="classic" name="select_class_anim" id="select_class_anim">
<option value="dog">dog</option>
</select>
</p>
<p>Insert unique characteristics of the animal (separated by coma ,):</p>
<input style="width: 90%; margin-bottom: 50px;" placeholder="color_green,long_lengs" type="text" name="animal_caracs" id="animal_caracs_txt">
<hr>
<p style="margin-bottom: 50px; margin-top: 30px;"><span class="btn success" onclick="createClass()">Create class</span></p>
<p>Insert the name of the class: <input type="text" name="class_name" id="class_name_txt"></p>
<p>Insert the characteristics of the class (separated by coma ,):</p>
<input style="width: 90%; margin-bottom: 50px;" placeholder="color_green,long_lengs" type="text" name="class_caracs" id="class_caracs_txt">
</div>
</div>
</div>
<div id="extra-div">
<div class="tab">
<p style="padding-left: 30px;">Explanation module</p>
</div>
<canvas id="derivation" style="padding-top: 30px;"></canvas>
</div>
<div class="card hidden" id="moreinfo-div">
<h2>About Animals prolog</h2>
<p>The original program and knowledgebase was created using only swi-prolog by Alejandro Medina Reyes, Carlos Escudero Mercado, Ana Paulina Mares Cupa and Itzel Calderón Guzmán. <a target="_blank" href="">SWI-PROLOG file</a>
</p>
<p>I (Alejandro Medina Reyes) adapted the program to use it inside a web application, using the following libraries to be able to use prolog in javascript</p>
<ul>
<li><a href="https://github.com/tau-prolog/tau-prolog">Tau prolog</a></li>
<li><a href="https://github.com/tau-prolog/draw-derivation-trees"> tau-prolog / draw-derivation-trees </a></li>
</ul>
<p>I am using the Pixabay API to show images of the animals and web storage to save locally the changes to the knowlegebase</p>
</div>
</div>
</body>
</html>