如何在django模板中用JS更改添加和删除标签

Question

I have a quiz Django app which consists of two parts. One is showing 10 sentences with their audio to remember, one per page, and the second is asking questions for the same set of sentences. First part was set up with js function which creates pagination in my html the following way:

my_template.html

<button id="prev">prev</button>
<button id="next">next</button>
<ul class="list-articles" id="dd">

</ul>

<script>
var my_objects =  `{{ my_objects|safe}}:` #list of items from my view function

function paginate(action) {
        console.log(action)
        if (action ==='next') {
            page_number++;
        }
        else{
                page_number--;
            }

       const audio = document.createElement('audio');
       audio.src =`/media/${my_objects[page_number].fields.audio}`;

        $('#dd').empty();
        $('#dd').append('<li><h1>'+ my_objects[page_number].fields['content'] +'</h1></li>');
        $('#dd').append(audio); 
        $('#page_number').val(page_number);
    } 

  document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('#next').onclick = function() {
           paginate('next'); #same goes for 'prev' button.
}
  })
</script>

Now when the user paginated through all the sentences I want to show the continue button and if the user clicks it, start the second part. The second part has absolutely same page except I need to hide content of my objects and leave only audio or vice versa and add textarea tag for the user's input. After that I need to loop over my objects again - now in the form of questions. I need to do that without page re-rendering so I don't need to store the list of objects or query the DB again.

I tried to make it with tag disabling and activating the second loop after the first ends but that looks quite messy and I suppose there is a smarter way of doing that. I'm not a JS developer so any help would be appreciated!

Answer 1

Here is one way you can approach this problem:

In your HTML template, add a "Continue" button that is initially hidden. When the user reaches the last page of the first part, show the "Continue" button using JavaScript. You can do this by adding a display: block style to the button element or by adding a class to the button element that includes the display: block style. When the user clicks the "Continue" button, hide the sentences and audio elements and show the textarea elements using JavaScript. You can do this by adding a display: none style to the sentences and audio elements and a display: block style to the textarea elements, or by adding and removing classes to the elements that include the appropriate styles. Start the second loop over the objects, this time showing the textarea elements and hiding the sentences and audio elements. Here is some sample code that demonstrates this approach:

<button id="continue-button" style="display: none">Continue</button>

<div id="sentences-container">
  {% for object in my_objects %}
    <div class="sentence">
      <h1>{{ object.fields.content }}</h1>
      <audio src="path/to/audio"></audio>
      <div class="translation">{{ object.fields.translation }}</div>
    </div>
  {% endfor %}
</div>

<div id="textarea-container" style="display: none">
  {% for object in my_objects %}
    <div class="question">
      <h1>{{ object.fields.content }}</h1>
      <audio src="path/to/audio"></audio>
      <div class="translation" style="display: none">{{ object.fields.translation }}</div>
      <textarea></textarea>
    </div>
  {% endfor %}
</div>

<script>
  // Show the "Continue" button when the user reaches the last page
  if (page_number === my_objects.length - 1) {
    document.querySelector('#continue-button').style.display = 'block';
  }

  // Handle the "Continue" button click
  document.querySelector('#continue-button').onclick = function() {
    // Hide the sentences and audio elements
    document.querySelector('#sentences-container').style.display = 'none';

    // Show the textarea elements
    document.querySelector('#textarea-container').style.display = 'block';
  }
</script>

Answer 2

Thanks for all who viewed and not commented. I found the answer myself. Just need to add JS functions which will empty the main tag and refill with necessary field, If anyone needs details. feel free to contact me.