ментальная карта в виде дерева

cvdgit · Jan 27, 2025 · 6ecdfef · 6ecdfef
1 parent 67d65d7
commit 6ecdfef
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 3 deletions.
diff --git a/asset/mental_map_quiz/MentalMap.js b/asset/mental_map_quiz/MentalMap.js
@@ -481,6 +481,11 @@ export default function MentalMap(element, deck, params) {
           repetition_mode: repetitionMode,
         }
       }, new VoiceResponse(new MissingWordsRecognition({}))))
+
+      $('[data-toggle="tooltip"]', this.element).tooltip({
+        container: 'body'
+      });
+
       return
     }
 

diff --git a/asset/mental_map_quiz/TreeView/TreeViewBody.css b/asset/mental_map_quiz/TreeView/TreeViewBody.css
@@ -46,12 +46,15 @@
 .node-children-toggle .chevron-down {
   display: flex;
 }
+
 .node-children-toggle .chevron-up {
   display: none;
 }
+
 .node-children-toggle.show-children .chevron-down {
   display: none;
 }
+
 .node-children-toggle.show-children .chevron-up {
   display: flex;
 }
@@ -213,5 +216,34 @@
 .mental-map-notify {
   position: absolute;
   top: 0;
-  left: 50%;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+
+  width: 350px;
+  max-width: 100%;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 32px 0px;
+  border-radius: 10px;
+  color: #fff;
+  background-color: rgba(13, 110, 253, 1);
+  font-size: 24px;
+}
+
+.mental-map-notify-text {
+  padding: 16px;
+  color: #fff
+}
+
+.mental-map-notify-button {
+  margin: auto;
+  margin-right: 16px;
+  box-sizing: content-box;
+  width: 16px;
+  height: 16px;
+  padding: .25em .25em;
+  color: #000;
+  background: transparent url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") center / 1em auto no-repeat;
+  border: 0;
+  border-radius: .375rem;
+  opacity: .5;
 }
diff --git a/asset/mental_map_quiz/TreeView/TreeViewBody.js b/asset/mental_map_quiz/TreeView/TreeViewBody.js
@@ -109,6 +109,12 @@ function processTreeNodes(list, body, history, voiceResponse, params) {
     const interimSpan = voiceResponseElem.querySelector('.interim_span')
 
     const startClickHandler = targetElement => {
+
+      $(rowElement.querySelector('.gn'))
+        .tooltip('hide')
+        .attr('title', 'Остановить запись')
+        .tooltip('fixTitle')
+
       finalSpan.innerHTML = ''
       interimSpan.innerHTML = ''
       resultSpan.innerHTML = ''
@@ -125,12 +131,23 @@ function processTreeNodes(list, body, history, voiceResponse, params) {
 
     const stopClickHandler = targetElement => {
 
+      $(rowElement.querySelector('.gn'))
+        .tooltip('hide')
+        .attr('title', 'Нажмите, что бы начать запись с микрофона')
+        .tooltip('fixTitle')
+
       rowElement.classList.remove('current-row')
       rowElement.parentNode.classList.remove('do-recording')
       rowElement.querySelectorAll('.target-text').forEach(el => el.classList.remove('selected'))
 
       const userResponse = finalSpan.innerHTML
       if (!userResponse) {
+        rowElement.closest('.mental-map').appendChild(createNotify('Речи не обнаружено'))
+        /*$(rowElement.querySelector('.gn'))
+          .tooltip('hide')
+          .attr('title', 'Речи не обнаружено')
+          .tooltip('fixTitle')
+          .tooltip('show')*/
         return
       }
 
@@ -182,7 +199,7 @@ function processTreeNodes(list, body, history, voiceResponse, params) {
               const val = Number(json?.overall_similarity)
 
               const historyItem = history.find(i => i.id === nodeId)
-              if (val > 50) {
+              if (val > 85) {
                 nodeStatusElement.innerHTML = nodeStatusSuccessHtml
 
                 if (historyItem) {
@@ -331,3 +348,20 @@ function stripTags(html) {
   div.innerHTML = html;
   return div.textContent || div.innerText || '';
 }
+
+function createNotify(text) {
+  const div = document.createElement('div')
+  div.classList.add('mental-map-notify')
+  div.innerHTML = `
+<div style="display: flex">
+    <div class="mental-map-notify-text">${text}</div>
+    <button class="mental-map-notify-button" type="button"></button>
+</div>
+`
+
+  div.querySelector('.mental-map-notify-button').addEventListener('click', e => div.remove())
+
+  setTimeout(() => div.remove(), 5000)
+
+  return div
+}
diff --git a/asset/mental_map_quiz/TreeView/TreeVoiceControl.js b/asset/mental_map_quiz/TreeView/TreeVoiceControl.js
@@ -13,7 +13,7 @@ export default function TreeVoiceControl(voiceResponse, startClickHandler, stopC
   elem.style.width = '60px'
   elem.style.height = '60px'
   elem.innerHTML = `<div class="question-voice__inner">
-            <div class="gn" style="width: 100%; height: 100%; margin: 0 auto">
+            <div data-toggle="tooltip" title="Нажмите, что бы начать запись с микрофона" class="gn" style="width: 100%; height: 100%; margin: 0 auto">
                 <div class="mc" style="pointer-events: none"></div>
             </div>
         </div>`