added action menu for deimos:answer_question.html

deimos/static/deimos/css/action_menu.css

@@ -0,0 +1,102 @@
+
+.navigation-m{
+ margin-top: 5%;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.menuToggle {
+ position: relative;
+ width: 70px;
+ height: 70px;
+ background: #fff;
+ border-radius: 70px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 0 15px 25px rgba(0,0,0,0.15);
+}
+.menuToggle::before{
+ content:'+';
+ position: absolute;
+ font-size: 3em;
+ font-weight: 200;
+ color: #ff216d;
+ transition: 1.5s; 
+}
+.menuToggle.active::before {
+ transform: rotateX(80deg);
+}
+
+.menu {
+ position: absolute;
+ width: 30px;
+ height:30px;
+ background: #fff;
+ border-radius: 70px;
+ z-index: -1;
+ transition: transform 0.5s, width 0.5s, height 0.5s; 
+ transition-delay: 1s, 0.5s, 0.5s;
+ transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.menuToggle.active ~ .menu {
+ width: 240px;
+ height: 70px;
+ z-index: 1;
+ transform: translateY(-100px);
+ transition-delay: 0s, 0.5s, 0.5s;
+ box-shadow: 0 15px 25px rgba(0,0,0,0.15);
+}
+
+.menu::before 
+{
+ content: '';
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ background:#fff;
+ left: calc(50% - 8px);
+ bottom: 4px;
+ transform: rotate(45deg);
+ border-radius: 2px;
+ transition: 0.5s;
+}
+.menuToggle.active ~ .menu::before{
+ transition-delay: 0.5s;
+ bottom: -6px;
+}
+.menu ul {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 80px;
+ gap: 40px;
+}
+.menu ul li{
+ list-style: none;
+ cursor: pointer;
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-30px);
+ transition: 0.25s;
+ transition-delay: calc(0s + var(--i));
+}
+.menuToggle.active ~ .menu ul li {
+ opacity: 1;
+ visibility: visible;
+ transform: translate(0px);
+ transition-delay: calc(0.75s + var(--i));
+}
+.menu ul li a{
+ display: block;
+ font-size: 2em;
+ text-decoration: none;
+ color: #555;
+}
+.menu ul li:hover a {
+ color: #ff216d;
+}

deimos/static/deimos/js/action_menu.js

@@ -0,0 +1,5 @@
+let menuToggle = document.querySelector('.menuToggle');
+menuToggle.addEventListener('click', (event)=>{
+ event.preventDefault();
+ menuToggle.classList.toggle('active');
+})

deimos/templates/deimos/action_menu.html

@@ -0,0 +1,20 @@
+<!--deimos: action_menu.html-->
+<div class="navigation-m">
+ <div class="menuToggle"></div>
+ <div class="menu">
+ <ul>
+ <li style="--i:0.1s;">
+ <a href="#"><ion-icon name="pencil-outline"></ion-icon>
+ </a>
+ </li>
+ <li style="--i:0.2s;">
+ <a href="#"><ion-icon name="camera-outline"></ion-icon>
+ </a>
+ </li>
+ <li style="--i:0.3s;">
+ <a href="#"><ion-icon name="mail-unread-outline"></ion-icon>
+ </a>
+ </li>
+ </ul>
+ </div>
+</div>

deimos/templates/deimos/answer_question.html

@@ -3,59 +3,62 @@
 {% load static %}
 {% block title%} Answer Question {% endblock %}
 {% block style%} <link rel="stylesheet" href="{% static 'deimos/css/question_nav.css' %}"/> 
+<link rel="stylesheet" href="{% static 'deimos/css/action_menu.css' %}"/> 
 {% endblock %}
 {% block body %}
  <h3>Question {{question.number}}</h3>
  <div class="page-container" id="answer-question">
  <br/>
-
- <form method="post" enctype="multipart/form-data" id="question-form">
- {% csrf_token %}
- <input type="hidden" value="{{question.id}}" name="question-id"/>
- <p class="question-content">{{question.text | safe}}</p>
- <br/>
- {% if is_mcq%}
- <div class="inputed-mcq-answers">
- {% for answer, is_latex, question_type in answers_is_latex_question_type %}
- <div class="mcq-option-answer">
- <div class="formatted-answer">
- {% if is_latex %}
- <input type="hidden" class="latex-answer-question-view" value="{{answer.content}}">
- {% else %}
- {{answer.content}}
- {% endif %}
- <input type="hidden" value="{{answer.pk}}" name="mcq_answer_id_{{ forloop.counter0 }}"/>
- <input type="hidden" value="0{{question_type}}" class="answer_info" name="mcq_answer_info_{{ forloop.counter0 }}"/>
+ <form method="post" enctype="multipart/form-data" id="question-form">
+ {% csrf_token %}
+ <input type="hidden" value="{{question.id}}" name="question-id"/>
+ <p class="question-content">{{question.text | safe}}</p>
+ <br/>
+ {% if is_mcq%}
+ <div class="inputed-mcq-answers">
+ {% for answer, is_latex, question_type in answers_is_latex_question_type %}
+ <div class="mcq-option-answer">
+ <div class="formatted-answer">
+ {% if is_latex %}
+ <input type="hidden" class="latex-answer-question-view" value="{{answer.content}}">
+ {% else %}
+ {{answer.content}}
+ {% endif %}
+ <input type="hidden" value="{{answer.pk}}" name="mcq_answer_id_{{ forloop.counter0 }}"/>
+ <input type="hidden" value="0{{question_type}}" class="answer_info" name="mcq_answer_info_{{ forloop.counter0 }}"/>
+ </div>
+ <button type="button" class="btn btn-warning mcq-false exempt">False</button> 
  </div>
- <button type="button" class="btn btn-warning mcq-false exempt">False</button> 
- </div>
- <br/> <br/> 
+ <br/> <br/> 
+ {% endfor %}
+ </div> 
+ <input type="submit" class="btn btn-success exempt" value="Submit Answer">
+ <br/> <br/>
+ {% elif is_fr %}
+
+ <div>
+ <textarea placeholder="Enter answer" class="w-100 question-input-field"></textarea>
+ </div>
+ <div> <input type="submit" class="btn btn-success exempt" value="Submit Answer"></div>
+ <br/><br/>
+ {% else %}
+
+ <input type="hidden" value="{{answer.pk}}" name="structural_answer_id_0"/>
+ {% for q_type in question_type %} <!--expecting to iterate only over one item-->
+ <input type="hidden" value="{{q_type}}" name="structural_answer_info_0"/>
  {% endfor %}
- </div> 
- <input type="submit" class="btn btn-success exempt" value="Submit Answer">
- <br/> <br/>
- {% elif is_fr %}
-
- <div>
- <textarea placeholder="Enter answer" class="w-100 question-input-field"></textarea>
- </div>
- <div> <input type="submit" class="btn btn-success exempt" value="Submit Answer"></div>
- <br/><br/>
- {% else %}
+ <input type="submit" class="btn btn-success exempt" value="Submit Answer">
+ <div class="formatted-answer"></div>
+ {% include 'deimos/calci.html' %}
+ <br/>
+ {% endif %}
+
+
+ <br/>
+ </form>
+
 
- <input type="hidden" value="{{answer.pk}}" name="structural_answer_id_0"/>
- {% for q_type in question_type %} <!--expecting to iterate only over one item-->
- <input type="hidden" value="{{q_type}}" name="structural_answer_info_0"/>
- {% endfor %}
- <input type="submit" class="btn btn-success exempt" value="Submit Answer">
- <div class="formatted-answer"></div>
- {% include 'deimos/calci.html' %}
- <br/>
- {% endif %}
 
-
- <br/>
- </form>
 
  <div class="navigation">
  <ul>
@@ -94,6 +97,10 @@ <h3>Question {{question.number}}</h3>
  <script src="{% static 'deimos/js/calci.js' %}"></script>
 {% endif %}
 <script src="{% static 'deimos/js/question_nav.js' %}"></script>
+<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+<script src="{% static 'deimos/js/action_menu.js' %}"></script>
+
 
 
 {% endblock %}

deimos/templates/deimos/calci.html

@@ -71,7 +71,7 @@
  </div>
  </div>
  </div>
-
+ {% include 'deimos/action_menu.html' %}
 
  </div>
 

deimos/urls.py

@@ -15,5 +15,6 @@
 
  path('courses/<int:course_id>/assignments/<int:assignment_id>/questions/<int:question_id>',\
  views.answer_question, name='answer_question'),
- path('question_nav', views.question_nav, name='question_nav')
+ path('question_nav', views.question_nav, name='question_nav'),
+ path('action_menu', views.action_menu, name='action_menu')
 ]

deimos/views.py

@@ -230,3 +230,6 @@ def is_student_enrolled(student_id, course_id):
 
 def question_nav(request):
  return render(request, 'deimos/question_nav.html', {})
+
+def action_menu(request):
+ return render(request, 'deimos/action_menu.html', {})

phobos/static/phobos/js/question_view.js

@@ -17,18 +17,6 @@ document.addEventListener('DOMContentLoaded', () => {
  formattedAnswerDiv.appendChild(formatted_answer);
  MathJax.typesetPromise();
  }
- /*
- else {
- var formatted_answer = MathJax.tex2chtml(formattedAnswerDiv.innerHTML + '\\phantom{}')
- // TODO: Maybe should this differently...because text answers won't be displayed
- // well, since 'and' and 'or' will be replaced with conjunction and disjunction symbol.
- // furthermore, spaces will be removed.
- formattedAnswerDiv.innerHTML = '';
- }
- 
- //inputElement.remove();
-
- */
  } catch (error) {
  console.log(error);
  }
@@ -38,34 +26,4 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
-/*
-document.addEventListener('DOMContentLoaded', () => {
- const latexAnswers = document.querySelectorAll('.latex-answer-question-view');
- 
- // Load MathJax
- const script = document.createElement('script');
- const script2 = document.createElement('script');
- script2.type = 'text/javascript';
- script2.src = src="https://polyfill.io/v3/polyfill.min.js?features=es6"
- script.type = 'text/javascript';
- script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
- script.async = true;
- document.head.appendChild(script);
- var formatted_answer = '';
- // Process LaTeX answers after MathJax is loaded
- script2.onload = () => {
- script.onload = () => {
- latexAnswers.forEach((element) => {
- MathJax.typesetPromise().then(() => {
- try{
- formatted_answer = MathJax.tex2chtml(element.value + '\\phantom{}');
- element.parentNode.appendChild(formatted_answer);
- }catch(error){
- console.log(error)
- }
- });})
- };
- };
- 
-});
-*/
+