-- >\nAI Homework HelpQuestion INSTRUCTIONS
. Need to add a functionality to a button , Student is facing issues with my js to make that work
. The relevant method to hide/show labels is dispatchHideShowLabels() in the WorldSide.js. So the question is how you are going to get access to that object when you click on the button
//@dispatchHideShowLabels is to hide/show labels in world container dispatchHideShowLabels() { this.setThisToCurrentContainer(); this.showLabels = ! this.showLabels; this.controller.hideShowLabels(this.showLabels); }/nCode
<! DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -- >
<meta name="description" content="">
<meta name="author" content="">
<title>Tarski's World </title>
<link rel="icon" type="image/png"
href=" .. / .. /images/static-page-img/tarski-icon.png">
<!-- Bootstrap core CSS -- > <link href=" .. / .. /lib/bootstrap-4.6.2/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -- >
<link href=" .. / .. /css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Page Specific CSS -- >
<link href=" .. / .. /css/tarskiWorld.css" rel="stylesheet">
<link href=" .. / .. /css/common.css" rel="stylesheet">
<link href=" .. / .. /css/timeline.css" rel="stylesheet">
<link href=" .. / .. /css/showClasses.css" rel="stylesheet">
<link href=" .. / .. /css/proof.css" rel="stylesheet">
<link href=" .. / .. /css/home-menu.css" rel="stylesheet">
<link href=" .. / .. /css/fontawesome-free-6.1.2-web/css/all.css" rel="stylesheet">
<!-- Application Specific CSS -- >
<link href="css/tarski.css" rel="stylesheet">
<link href=" .. / .. /components/application/css/application.css" rel="stylesheet">
<link href=" .. / .. /components/menubar/css/menubar.css" rel="stylesheet">
<!-- < link href=" .. /Plato/css/plato.css" rel="stylesheet"> -- >
<link href=" .. / .. /components/toolbar/css/toolbar.css" rel="stylesheet">
<link href=" .. / .. /components/worldToolbar/css/worldToolbar.css" rel="stylesheet">
<link href=" .. / .. /components/editor/css/editor.css" rel="stylesheet">
<link href=" .. / .. /components/SearchBox/css/SearchBox.css" rel="stylesheet">
<!-- < link href=" .. / .. / .. /WebContent/components/tabbedcontainer/css/tabbedcontainer.css" rel="stylesheet"> -- >
<!-- New Tabbed Container -- >
<link href=" .. / .. /components/tabbedContainer/tabbedContainer.css" rel="stylesheet" type="text/css"/> <link href=" .. / .. /components/modal/modal.css" rel="stylesheet">
<link href=" .. / .. /components/filesystem/css/slick/slick.grid.css" rel="stylesheet" type="text/css"/> <link href=" .. / .. /components/filesystem/css/filesystem.css" rel="stylesheet" type="text/css"/> <link href=" .. / .. /components/localization/css/localizer.css" rel="stylesheet" type="text/css"/> <link href=" .. / .. /components/sentenceDivider/css/sentenceDivider.css" rel="stylesheet" type="text/css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -- > <!-- [if lt IE 9]>
<script src=" .. / .. /lib/html5shiv.min.js"></script>
<! [endif] -- >
<script src=" .. / .. /lib/respond.min.js"></script>
<!--< script src="https://www.w3schools.com/lib/w3.js"></script> -- >
<!-- < ;! –D3 javascript–> ;-- > <!--< script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> -- >
</head>
<body>
<div id="tarski-app" > </div>
<div id="footer"></div>
<button id="toggle-labels-button">Toggle Labels</button> <!-- Added button for the eye -- >
<!-- Polyfill to handle older browsers -- >
<script src=" .. / .. /lib/polyfill.min.js"></script>
<!-- Bootstrap core and other JavaScript
<!-- Placed at the end of the document so the pages load faster -- > -> <script src=" .. / .. /lib/jquery-3.5.1.js"></script>
<script src=" .. / .. /lib/bootstrap-4.6.2/js/bootstrap.bundle.min.js"></script>
<!-- Low-level dependencies -- >
<script src=" .. / .. /js/config.js"></script>
<script src=" .. / .. /js/util/util.js"></script>
<script src=" .. / .. /js/util/managed-storage.js"></script>
<script src=" .. / .. /js/util/secure.js" type="text/javascript"></script>
<script src=" .. / .. /js/obtainlogintoken.js" type="text/javascript"></script>
<script src=" .. / .. /js/openproof-polyfills.js"></script>
<script src=" .. / .. /lib/jsrsasign.min.js"></script>
<script src=" .. / .. /lib/jquery-ui.min.js"></script>
<script src=" .. / .. /lib/lz-string.min.js"></script>
<script src=" .. / .. /components/undo/js/undomanager.js"></script>
<!------ Application-Specific javascript ---- >
<script src=" .. / .. /components/EventManager/js/EventManager.js"></script>
<script src=" .. / .. /components/editor/js/editor.js"></script>
<!-- status indicator needs to be above viewers.min -- >
<script src=" .. / .. /components/StatusIndicator/js/StatusIndicator.js"></script>
<script src=" .. / .. /lib/slick/sortable.min.js"></script>
<script src=" .. / .. /lib/slick/jquery-ui-1.8.16.custom.min.js"></script>
<script src=" .. / .. /lib/slick/slick.core.js"></script>
<script src=" .. / .. /lib/slick/slick.interactions.js"></script>
<script src=" .. / .. /lib/slick/slick.formatters.js"></script>
<script src=" .. / .. /lib/slick/slick.editors.js"></script>
<script src=" .. / .. /lib/slick/slick.grid.js"></script>
<script src=" .. / .. /lib/slick/slick.dataview.js"></script>
<script src=" .. / .. /lib/slick/plugins/slick.rowselectionmodel.js"></script>
<script src=" .. / .. /lib/slick/plugins/slick.rowmovemanager.js"></script>
<script src=" .. / .. /components/toolbar/js/toolbar.js"></script>
<script src=" .. / .. /components/worldToolbar/js/worldToolbar.js"></script>
<script src=" .. / .. /components/buttonbar/js/buttonbar.js"></script>
<script src=" .. / .. /components/SearchBox/js/SearchBox.js"></script>
<script src=" .. / .. /components/filesystem/js/filesystem.js"></script>
<script src=" .. / .. /components/localization/js/localizer.js"></script>
<script src=" .. / .. /components/application/js/application.js"></script>
<script src=" .. / .. /components/EventManager/js/KeyboardShortcutHandler.js"></script>
<!--< script src=" .. / .. / .. /WebContent/components/tabbedcontainer/js/tabbedcontainer.js"></script> -- > <!-- New Tabbed Container -- >
<script src=" .. / .. /components/tabbedContainer/legacyTabbedContainer.js"></script>
<script src=" .. / .. /components/tabbedContainer/TabbedContainers.js"></script>
<script src=" .. / .. /components/hoverbox/js/hoverbox.js"></script>
<script src=" .. / .. /components/modal/js/modal.js"></script>
<script type="text/javascript" src=" .. /Submit/js/submit.js"></script>
<script src=" .. / .. /components/menubar/js/menubar.js"></script>
<script src=" .. / .. /components/sentenceDivider/js/sentenceDivider.js"></script>
<script src=" .. / .. /components/controller/js/controller.js"></script>
<script src="./js/world/WorldSide.js"></script>
<script src="./js/world/TarskiWorldObserver.js"></script>
<script src="./js/world/TarskiWorldController.js"></script>
<script src="./js/sentences/TarskiSentenceController.js"></script>
<script src="./js/sentences/SentenceSide.js"></script>
<script src="./js/tarski.js"></script>
<script src="./js/game/tarskiGame.js"></script>
<script src="./js/game/model.js"></script>
<script src="./js/game/view.js"></script>
Undoable Actions Classes ------ >
<script src=" .. / .. /components/undo/js/AddDeleteEditorContainerAction.js"></script>
<script src="./js/sentences/SentencesActions.js"></script>
<script src="./js/world/WorldsActions.js"></script>
<script src=" .. / .. /components/editor/js/FOLEditorActions.js"></script>
<script src=" .. / .. /lib/WebGL.js"></script>
<script src=" .. / .. /lib/three.min.js"></script>
<script src=" .. / .. /js/Products/tarskiWorldSaving.js"></script>
<script src=" .. / .. /oplib/viewers.min.js"></script>
<!-- UNCOMMENT LATER -- >
<!-- for debugging -- >
<script src=" .. / .. /components/viewers/sentences/model.js"></script>
<script src=" .. / .. /components/viewers/tarski/model.js"></script>
<script src=" .. / .. /components/viewers/tarski/cameraConfig.js"></script> <script src=" .. / .. /components/viewers/tarski/tarskiWorldTexture.js"></script>
<script src=" .. / .. /components/viewers/tarski/tarskiWorldBlocks.js"></script> <script src=" .. / .. /components/viewers/tarski/glWorldViewer.js"></script>
<script src=" .. / .. /components/viewers/tarski/tarskiWorldWebGLView.js"></script>
<script src=" .. / .. /components/viewers/sentences/Sentences Viewer.js"></script> <!-- UNCOMMENT LATER till here -- >
<script src="./js/sentences/SentenceObserver.js"></script>
<!-- Autosize -- >
<script src=" .. / .. /lib/autosize/autosize.min.js"></script>
<script src=" .. / .. /components/BugReport/js/bugreport.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const toggleLabelsButton = document.getElementById('toggle-labels-button');
if (toggleLabelsButton) {
toggleLabelsButton.addEventListener('click', () => {
if (window.worldSideInstance) {
window.worldSideInstance.dispatchHideShowLabels();
} else { console.error("worldSideInstance is not available.");
} }); } else { console.error("Element with ID 'toggle-labels-button' not found."); } }); </script>
</body>
</html>
