Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory : /var/www/html/libs/absol-poser/document/
Upload File :
Current File : /var/www/html/libs/absol-poser/document/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Poser Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Alegreya|Alegreya+SC|Alegreya+Sans|Alegreya+Sans+SC|Alfa+Slab+One|Amatic+SC|Andika|Anton|Archivo|Archivo+Narrow|Arima+Madurai|Arimo|Arsenal|Asap|Asap+Condensed|Athiti|Bahianita|Bai+Jamjuree|Baloo|Baloo+Bhai|Baloo+Bhaijaan|Baloo+Bhaina|Baloo+Chettan|Baloo+Da|Baloo+Paaji|Baloo+Tamma|Baloo+Tammudu|Baloo+Thambi|Bangers|Barlow|Barlow+Condensed|Barlow+Semi+Condensed|Barriecito|Be+Vietnam|Bevan|Big+Shoulders+Display|Big+Shoulders+Text|Bungee|Bungee+Hairline|Bungee+Inline|Bungee+Outline|Bungee+Shade|Cabin|Cabin+Condensed|Chakra+Petch|Charm|Charmonman|Chonburi|Coiny|Comfortaa|Cormorant|Cormorant+Garamond|Cormorant+Infant|Cormorant+SC|Cormorant+Unicase|Cormorant+Upright|Cousine|Crimson+Pro|Cuprum|Dancing+Script|Darker+Grotesque|David+Libre|Dosis|EB+Garamond|Encode+Sans|Encode+Sans+Condensed|Encode+Sans+Expanded|Encode+Sans+Semi+Condensed|Encode+Sans+Semi+Expanded|Exo|Exo+2|Fahkwang|Farsan|Faustina|Fira+Sans|Fira+Sans+Condensed|Fira+Sans+Extra+Condensed|Francois+One|Grenze|Hepta+Slab|IBM+Plex+Mono|IBM+Plex+Sans|IBM+Plex+Sans+Condensed|IBM+Plex+Serif|Inconsolata|Itim|Josefin+Sans|Judson|Jura|K2D|Kanit|KoHo|Kodchasan|Krub|Lalezar|Lemonada|Lexend+Deca|Lexend+Exa|Lexend+Giga|Lexend+Mega|Lexend+Peta|Lexend+Tera|Lexend+Zetta|Literata|Livvic|Lobster|Lora|M+PLUS+1p|M+PLUS+Rounded+1c|Maitree|Major+Mono+Display|Mali|Manuale|Markazi+Text|Maven+Pro|Merriweather|Metrophobic|Mitr|Montserrat|Montserrat+Alternates|Muli|Niramit|Noticia+Text|Noto+Sans|Noto+Sans+SC|Noto+Serif|Noto+Serif+SC|Noto+Serif+TC|Nunito|Nunito+Sans|Old+Standard+TT|Open+Sans|Open+Sans+Condensed:300|Oswald|Pacifico|Pangolin|Patrick+Hand|Patrick+Hand+SC|Pattaya|Paytone+One|Philosopher|Play|Playfair+Display|Playfair+Display+SC|Podkova|Prata|Pridi|Prompt|Quicksand|Roboto|Roboto+Condensed|Roboto+Mono|Roboto+Slab|Rokkitt|Rosario|Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Saira+Stencil+One|Sarabun|Sawarabi+Gothic|Sedgwick+Ave|Sedgwick+Ave+Display|Sigmar+One|Source+Code+Pro|Source+Sans+Pro|Space+Mono|Spectral|Spectral+SC|Sriracha|Srisakdi|Taviraj|Thasadith|Tinos|Trirong|VT323|Varela+Round|Vollkorn|Vollkorn+SC|Yanone+Kaffeesatz|Yeseva+One&display=swap"
rel="stylesheet">
<link href="https://absol.cf/libs/document_style/stylesheet.css"
rel="stylesheet">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>
document.write('<scri' + 'pt src="../dist/absol_poser.js?time=' + new Date().getTime() + '"></sc' + 'ript>');
</script>
</head>
<body>
<style>
div.sub-1 {
padding: 0 5px 0 5px;
}
div.sub-2 {
padding: 0 5px 0 10px;
}
</style>
<script>
var _ = absol._;
var $ = absol.$;
var demo_data_sync = fetch('../demo/demo_data.js').then(function (res) {
return res.text()
}).then(function (dataText) {
return (new Function('module', dataText + '\n ;return module.exports;'))({exports: {}});
});
</script>
<h1>Absol Poser</h1>
<h2 class="title">Editor Element</h2>
<h3>Section</h3>
<div id="demo-section" class="sub-2">
<h4>Demo</h4>
</div>
<div id="data-section" class="sub-2">
<h4>Data</h4>
<pre class="json">
<code></code>
</pre>
</div>
<div class="sub-2">
<h4>js</h4>
<script class="viewable">
_({
tag: "APEditableSection".toLowerCase(),
props: {
data: {
name: "Lịch sử, địa lý, con người",
description: "Phần này 3 điểm",
images: [
"https://kobiebroomes.files.wordpress.com/2017/09/history.png"
]
}
},
on: {
change: function (event) {
var data = this.data;
this.viewerElt = this.viewerElt || $('#data-section pre');
this.viewerElt.clearChild().addChild(_({
tag: 'code',
child: {text: JSON.stringify(data, null, 4)}
}));
hljs.highlightElement(this.viewerElt.firstChild);
}
}
}).addTo($('#demo-section'));
</script>
</div>
<h3>Question</h3>
<div class="sub-2">
<h4>Editable Question</h4>
<div id="question-demo"></div>
<script class="viewable">
(function () {
var ctn = $('#question-demo');
var eQuestion = _({
tag: 'apeditablequestion',
on: {
change: updateData
}
});
var resultTxt = _('<h5>preview</h5>>');
var dataViewer = _({
tag: 'pre'
});
function updateData() {
var jsonCode = JSON.stringify(eQuestion.data, null, 4);
dataViewer.clearChild().addChild(_({
tag: 'code',
child: {
text: jsonCode
}
}));
hljs.highlightElement(dataViewer.firstChild);
}
ctn.addChild([eQuestion, resultTxt, dataViewer]);
updateData();
})();
</script>
</div>
<div id="question-types" class="sub-2"></div>
<script>
(function () {
var types = Object.keys(absol.poser.APEditableQuestion.prototype.typeHandlers);
var table = _({
tag: 'table',
class: 'overviewSummary',
child: [
{
tag: 'caption',
child: {tag: 'span', child: {text: 'example data'}}
},
{
tag: 'thead',
child: {
tag: 'tr',
child: ['<th class="colFirst">type</th>', '<th class="colLast">example</th>']
},
},
{
tag: 'tbody',
}
]
}).addTo($('#question-types'));
demo_data_sync.then(function (data) {
var tBody = $('tbody', table);
var dataByTypes = data.reduce(function (ac, cr) {
cr.questions.forEach(function (qt) {
ac[qt.type] = qt;
});
return ac;
}, {});
types.forEach(function (type, i) {
var row = _({
tag: 'tr',
child: [
{tag: 'td', class: 'colFirst', child: {text: type}},
{
tag: 'td',
class: 'colLast',
child: {
tag: 'code',
class: 'json',
style: {whiteSpace: 'pre-wrap', backgroundColor: 'transparent'},
child: {text: JSON.stringify(dataByTypes[type], null, 4)}
}
}
]
});
hljs.highlightElement($('code', row));
tBody.addChild(row);
var demoRow = _({
tag: 'tr',
child: {
tag: 'td',
attr: {colspan: 2},
child: {
tag: 'APEditableQuestion'.toLowerCase(),
props: {
idx: i + 1,
data: dataByTypes[type]
}
}
}
});
tBody.addChild(demoRow);
});
});
})();
</script>
<h2 class="title">Editor Fragment</h2>
<div id="editor-fragment-demo" class="sub-1">
<script class="viewable">
(function () {
var PoserEditor = absol.poser.PoserEditor;
var mPoserEditor = new PoserEditor();
var mPoserEditorView = mPoserEditor.getView();
mPoserEditorView.addClass('your-custom-class-if-need')
.addStyle({//your custom style
height: '80vh',
border: '1px solid blue'
});
$('#editor-fragment-demo').addChild(mPoserEditorView);
demo_data_sync.then(function (data) { //get data from server then ...
mPoserEditor.setData(data);
})
})();
</script>
</div>
<h2 class="title">View Element</h2>
<h3>Section</h3>
<div class="sub-2">
<div id="demo-view-section"></div>
<script class="viewable">
(function () {
var ctn = $('#demo-view-section');
var section = _({
tag: 'PVSection'.toLowerCase(),
props: {
data: {
name: "Lịch sử, địa lý, con người",
description: "Phần này 3 điểm ",
images: [
"https://kobiebroomes.files.wordpress.com/2017/09/history.png"
]
}
}
});
ctn.addChild(section);
})();
</script>
</div>
<h3>Question</h3>
<div class="sub-2">
<h4>Demo</h4>
<div id="demo-view-question"></div>
<script class="viewable">
(function () {
var ctn = $('#demo-view-question');
var question = _({
tag: 'PVQuestion'.toLowerCase(),
props: {
idx: 27,
data: {
"type": "checkboxes",
"content": "Chọn những câu đúng trong các câu sau đây: ",
"description": "",
"images": [
"https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Insulincrystals.jpg/300px-Insulincrystals.jpg"
],
"answer": [
{
"text": "Chất rắn kết tinh là chất rắn có cấu tạo từ một tinh thể.",
"images": []
},
{
"text": "Chất rắn có cấu tạo từ những tinh thể rất nhỏ liên kết hổn độn thuộc chất rắn kết tinh.",
"images": []
},
{
"text": "Chất rắn kết tinh có nhiệt độ nóng chảy xác định và có tính dị hướng.",
"images": []
},
{
"text": "Chất rắn có nhiệt độ nóng chảy xác định chất rắn đó thuộc chất rắn kết tinh.",
"images": []
},
"other"
],
"required": false
},
// result:[{
// "idx": 3
// }],
result: null//user did not select before
},
on: {
resultchange: updateResult
}
});
var title = _('<h4>Result</h4>');
var resultView = _({
tag: 'pre'
});
function updateResult() {
var result = question.result; //get result data of question
var jsonCode = JSON.stringify(result, null, 4);
var code = _({
tag: 'code',
child: {text: jsonCode}
});
resultView.clearChild()
.addChild(code);
hljs.highlightElement(code);
}
ctn.addChild([question, title, resultView]);
updateResult();
})();
</script>
</div>
<div id="demo-view-all-question" class="sub-2">
</div>
<script>
(function () {
var types = Object.keys(absol.poser.APEditableQuestion.prototype.typeHandlers);
demo_data_sync.then(function (data) {
var dataByTypes = data.reduce(function (ac, cr) {
cr.questions.forEach(function (qt) {
ac[qt.type] = qt;
});
return ac;
}, {});
var ctn = $('#demo-view-all-question');
types.forEach(function (type, i) {
var title = _('<h4>' + type + '</h4>');
var viewer = _({
tag: 'PVQuestion'.toLowerCase(),
props: {
idx: i + 1,
data: dataByTypes[type]
}
});
ctn.addChild([title, viewer]);
});
})
})();
</script>
<h2 class="title">View Fragment</h2>
<div class="sub-2">
<div id="demo-view-fragment"></div>
<script class="viewable">
(function () {
var ctn = $('#demo-view-fragment');
var PoserViewer = absol.poser.PoserViewer;
var mPoserViewer = new PoserViewer();
var view = mPoserViewer.getView();
view.addClass('your-custom-class-if-need')
.addStyle({
height: '80vh',
width: '100%'
});
var resultView = _('pre');
function updateResult() {
var result = mPoserViewer.getResult();
var code = _({
tag: 'code',
child: {text: JSON.stringify(result, null, 4)}
});
resultView.clearChild().addChild(code);
hljs.highlightElement(code);
}
mPoserViewer.on('resultchange', updateResult);
ctn.addChild([view, resultView]);
demo_data_sync.then(function (data) {
mPoserViewer.setData(data);
updateResult();
});
})();
</script>
</div>
<h2>Expert</h2>
<h3>Editor without tool</h3>
<div class="sub-2">
<div id="expert-1"></div>
<script class="viewable">
(function () {
var ctn = $('#expert-1');
var PoserEditor = absol.poser.PoserEditor;
var mPoserEditor = new PoserEditor();
var view = mPoserEditor.getView();
view.addClass('ap-without-tool')
.addClass('ap-without-scroller');
var treeEditorView = mPoserEditor.treeEditor.getView();
var newSectionBtn = _({
tag: 'button',
child: {text: 'New Section'},
on: {
click: function () {
// mPoserEditor.addNewSection();
mPoserEditor.addNewSection({data: {name: "New Section"}});// with init data
}
}
});
var newQuestionBtn = _({
tag: 'button',
child: {text: 'New Question'},
on: {
click: function () {
// mPoserEditor.addNewQuestion();
mPoserEditor.addNewQuestion({data: {content: "New Question"}});// with init data
}
}
});
var deleteFocusBlockBtn = _({
tag: 'button',
child: {text: 'Delete Focus Block'},
on: {
click: function () {
mPoserEditor.deleteFocusBlock();
}
}
});
ctn.addChild([newSectionBtn, newQuestionBtn, deleteFocusBlockBtn, view, treeEditorView]);
demo_data_sync.then(function (data) {
mPoserEditor.setData(data);
if (location.href.indexOf("#expert-1") >= 0) {
ctn.scrollIntoView(true);
setTimeout(function () {
ctn.scrollIntoView(true);
}, 1000);
setTimeout(function () {
ctn.scrollIntoView(true);
}, 1500);
}
});
})();
</script>
</div>
<script src="https://absol.cf/absol/demo/autohightlighting.js?"></script>
</body>
</html>
Server : Apache/2.4.41 (Ubuntu)