<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>c(ASP) Justification</title>
<style>
.treemenu li { list-style: none; }
.treemenu .toggler { cursor: pointer; }
.treemenu .toggler:before { display: inline-block; margin-right: 2pt; }
li.tree-empty > .toggler { opacity: 0.3; cursor: default; }
li.tree-empty > .toggler:before { content: " "; }
li.tree-closed > .toggler:before {
content: "";
height: 0;
width: 0;
border-color: transparent blue;
border-style: solid;
border-width: 0.25em 0 0.25em 0.5em;
}
li.tree-opened > .toggler:before {
content: "";
height: 0;
width: 0;
border-color: blue transparent ;
border-style: solid;
border-width: 0.5em 0.25em 0 0.25em;
}
</style>
<link rel="icon" href="logo.ico">
</head>
<body style="font-size:15px;background: #ECECEC; margin:80px; color:#333;">
<h3>Query</h3>
<b>
<font color=blue>?-</font>
diagnosis(Jose,A).
<br><br>
<br>
A = no fever ?<br>
</b>
<br><br>
<h3>Model</h3>
diagnosis(Jose,no fever) , temp(Jose,B │{B #=< 38}) , reg_temp(Jose,37,-6) , reg_temp(Jose,39,-4) , diagnosis(Pedro,fever) , temp(Pedro,39) , reg_temp(Pedro,39,-2)<br><br>
<h3> Justification <button onclick="expand()">Expand All</button><button onclick="depth(+1)">+1</button><button onclick="depth(-1)">-1</button><button onclick="collapse()">Collapse All</button></h3>
<ul class="tree">
<li>
<li>
The diagnosis of the patient Jose is no fever
<ul>
</li>
</li>
<li>
It is consider that the patient Jose has a temperature B less or equal 38
<ul>
<li>
There is no valid register for the patient Jose
<ul>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
<li>
There is no register, for the patient Jose, with a temperature C not equal 37, and not equal 39, at any time point
<ul>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</ul>
</li>
</li>
</li>
</li>
</li>
</li>
<li>
There is no register, for the patient Jose, with the temperature 37, at a time point E not equal -6
<ul>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</ul>
</li>
</li>
<li>
There is a register, for the patient Jose, with the temperature 37, at the time point -6
</li>
<li>
A register at the time point -6 is not recent
<ul>
</li>
</li>
</ul>
</li>
</li>
</li>
</li>
</li>
</li>
<li>
There is no register, for the patient Jose, with the temperature 39, at a time point F not equal -4
<ul>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</li>
</ul>
</li>
</li>
<li>
There is a register, for the patient Jose, with the temperature 39, at the time point -4
</li>
<li>
A register at the time point -4 is not recent
<ul>
</li>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
It is not high a temperature B less or equal 38
<ul>
</li>
</li>
</ul>
</li>
</ul>
</li>
<li>
The global constraints hold
<ul>
</li>
</li>
</li>
<li>
The diagnosis of the patient Pedro is fever
<ul>
</li>
</li>
<li>
It is known that the patient Pedro has the temperature 39
<ul>
<li>
There is a valid register for the patient Pedro with the temperature 39
<ul>
<li>
There is a register, for the patient Pedro, with the temperature 39, at the time point -2
</li>
<li>
A register at the time point -2 is recent
<ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
It is high the temperature 39
<ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script
src="https://code.jquery.com/jquery-1.11.2.min.js"
integrity="sha256-Ls0pXSlb7AYs7evhd+VLnWsZ/AqEHcXBeMZUycz/CcA="
crossorigin="anonymous"></script>
<script type="text/javascript">
(function($){
$.fn.depth = function(options,depth) {
options = options || {};
options.delay = options.delay || 0;
this.find("> li").each(function() {
e = $(this)
var subtree = e.find('> ul');
if (subtree.length > 0) {
if (depth > 0) {
e.addClass('tree-opened');
e.removeClass('tree-closed');
subtree.slideDown(options.delay);
subtree.show(options.delay);
subtree.depth(options,depth-1);
} else {
e.removeClass('tree-opened');
e.addClass('tree-closed');
subtree.slideUp(options.delay);
subtree.hide(options.delay);
subtree.collapse(options);
}
}
});
return true;
}
$.fn.expand = function(options,depth) {
options = options || {};
options.delay = options.delay || 0;
this.find("> li").each(function() {
e = $(this)
var subtree = e.find('> ul');
if (subtree.length > 0) {
e.addClass('tree-opened');
e.removeClass('tree-closed');
subtree.slideDown(options.delay);
subtree.show(options.delay);
subtree.expand(options,depth+1);
}
g_depth=Math.max(g_depth,depth);
});
return true;
}
$.fn.collapse = function(options) {
options = options || {};
options.delay = options.delay || 0;
this.find("> li").each(function() {
e = $(this)
var subtree = e.find('> ul');
if (subtree.length > 0) {
e.removeClass('tree-opened');
e.addClass('tree-closed');
subtree.slideUp(options.delay);
subtree.hide(options.delay);
subtree.collapse(options);
}
});
return true;
}
$.fn.treemenu = function(options) {
options = options || {};
options.delay = options.delay || 0;
options.openActive = options.openActive || false;
options.closeOther = options.closeOther || false;
options.activeSelector = options.activeSelector || ".active";
this.addClass("treemenu");
if (!options.nonroot) {
this.addClass("treemenu-root");
}
options.nonroot = true;
this.find("> li").each(function() {
e = $(this);
var subtree = e.find('> ul');
var button = e.find('.toggler').eq(0);
if(button.length == 0) {
// create toggler
var button = $('<span>');
button.addClass('toggler');
e.prepend(button);
}
if(subtree.length > 0) {
subtree.hide();
e.addClass('tree-closed');
e.find(button).click(function() {
var li = $(this).parent('li');
if (options.closeOther && li.hasClass('tree-closed')) {
var siblings = li.parent('ul').find("li:not(.tree-empty)");
siblings.removeClass("tree-opened");
siblings.addClass("tree-closed");
siblings.removeClass(options.activeSelector);
siblings.find('> ul').slideUp(options.delay);
}
li.find('> ul').slideToggle(options.delay);
li.toggleClass('tree-opened');
li.toggleClass('tree-closed');
li.toggleClass(options.activeSelector);
});
$(this).find('> ul').treemenu(options);
} else {
$(this).addClass('tree-empty');
}
});
if (options.openActive) {
var cls = this.attr("class");
this.find(options.activeSelector).each(function(){
var el = $(this).parent();
while (el.attr("class") !== cls) {
el.find('> ul').show();
if(el.prop("tagName") === 'UL') {
el.show();
} else if (el.prop("tagName") === 'LI') {
el.removeClass('tree-closed');
el.addClass("tree-opened");
el.show();
}
el = el.parent();
}
});
}
expand({delay:0},0);
max_depth = g_depth;
this.collapse({delay:0});
g_depth = 0;
return this;
}
})(jQuery);
var g_depth = 0;
var max_depth = 4
function depth(step){
g_depth = g_depth + step;
g_depth = g_depth < 0 ? 0 : g_depth;
g_depth = g_depth > max_depth ? max_depth : g_depth;
$(".tree").depth({delay:500},g_depth);
}
function expand(){
g_depth = 0
$(".tree").expand({delay:0},0);
}
function collapse(){
$(".tree").collapse({delay:0});
g_depth = 0;
}
$(function(){
$(".tree").treemenu({delay:0}).openActive();
});
</script>
<div style='min-height: 400px'></div>
</body>
</html>