+
+
+Code
+from IPython.core.display import HTML
+from IPython.core.display import HTML
+
+HTML('''
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+}
+
+.switch input {display:none;}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #2196F3;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+</style>
+</head>
+<body>
+
+<h2>បញ្ហាបិតបើកកុងតាក់ភ្លើង</h2>
+
+<img id="myImage" onclick="changeImage()" src="figures/light_off.gif" width="180" height="180" style="display: block; margin-left: auto; margin-right: auto;">
+<br>
+<br>
+<div style="display: flex; justify-content: center;">
+<div class="switch">
+ <label class="switch">
+ <input type="checkbox" id="switch1" onclick="changeImage()">
+ <span class="slider round"></span>
+ </label>
+</div>
+
+<div class="switch">
+ <label class="switch">
+ <input type="checkbox" id="switch2" onclick="changeImage()">
+ <span class="slider round"></span>
+ </label>
+</div>
+
+<div class="switch">
+ <label class="switch">
+ <input type="checkbox" id="switch3" onclick="changeImage()">
+ <span class="slider round"></span>
+ </label>
+</div>
+
+<div class="switch">
+ <label class="switch">
+ <input type="checkbox" id="switch4" onclick="changeImage()">
+ <span class="slider round"></span>
+ </label>
+</div>
+</div>
+
+<button style="background-color: #2196F3; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;" onclick="printTable()">Enter</button>
+
+<script>
+function changeImage() {
+ var image = document.getElementById('myImage');
+ var switch1 = document.getElementById('switch1');
+ var switch2 = document.getElementById('switch2');
+ var switch3 = document.getElementById('switch3');
+ var switch4 = document.getElementById('switch4');
+ if (switch1.checked && switch3.checked && !switch2.checked && !switch4.checked) {
+ image.src = "figures/light_on.gif";
+ } else if (switch1.checked && switch4.checked && !switch3.checked && !switch2.checked) {
+ image.src = "figures/light_on.gif";
+ } else if (switch2.checked && switch3.checked && !switch1.checked && !switch4.checked) {
+ image.src = "figures/light_on.gif";
+ } else if (switch4.checked && !switch3.checked && !switch1.checked) {
+ image.src = "figures/light_on.gif";
+ } else {
+ image.src = "figures/light_off.gif";
+ }
+ var input = '(' + (switch1.checked ? 1 : 0) + ',' + (switch2.checked ? 1 : 0) + ',' + (switch3.checked ? 1 : 0) + ',' + (switch4.checked ? 1 : 0) + ')';
+ var output = ((switch1.checked && switch3.checked && !switch2.checked && !switch4.checked) || (switch1.checked && switch4.checked && !switch3.checked && !switch2.checked) || (switch2.checked && switch3.checked && !switch1.checked && !switch4.checked) || (switch4.checked && !switch3.checked && !switch1.checked)) ? 1 : 0;
+ rows.push([input, output]);
+ var table = '<table><tr><th>Input x</th><th>Output y</th></tr>';
+ for (var i = 0; i < rows.length; i++) {
+ table += '<tr><td>' + rows[i][0] + '</td><td>' + rows[i][1] + '</td></tr>';
+ }
+ table += '</table>';
+ return table;
+}
+
+function printTable() {
+ var table = '<table><tr><th>Input x</th><th>Output y</th></tr>';
+ for (var i = 0; i < rows.length; i++) {
+ table += '<tr><td>' + rows[i][0] + '</td><td>' + rows[i][1] + '</td></tr>';
+ }
+ table += '</table>';
+ document.getElementById('table-container').innerHTML = table;
+}
+</script>
+
+</body>
+</html>
+''')
+
+
+
+
+
+
+
+
+
+
+
+
+បញ្ហាបិតបើកកុងតាក់ភ្លើង
+ +
++
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
