1

I need your help. I had problem about how to change element of html from javascript.

This is the view of multiple choice :

multiple choice view

If I clicked dropdown “Multiple Choice”, and selected “Dropdown”, the view will be like this :

dropdown view

This's code of multiple choice view :

<li data-type="multiple_choice" id="multiple-choices-html" class="multiple_choice data-drop">
  <p data-editable data-type="text" class="question"><%= raw item["question"] %></p>
  <ol type="a" class="options">
    <% item["options"].each do |opt| %>
        <li style="position: relative;">
            <p data-editable data-type="text"><%= opt %></p><a title="delete answer" data-delete-answerable href="#" style="position: absolute;top: 0;right: 0;"><span class="fa fa-minus-square-o" style="font-size: 1.2em;"></a>
        </li>      
    <% end %>
    <li style="list-style: none;"><a title="add more answer" style="margin-top: 10px;" data-answerable href="javascript:void(0);"><span class="fa fa-plus-square-o" style="font-size: 1.2em;"></a></li>
  </ol>
  <%= render "quizzes/components/actions", tipe: "Multiple Choice" %>
</li>

and this's code of dropdown view :

<li data-type="dropdown" class="dropdown data-drop" id="dropdown-html">
  <p data-editable data-type="text" class="question">Enter your question here ...</p>
  <ul class="options">
    <li style="position: relative;">
        <p data-editable data-type="text">Answer 1</p><a title="delete answer" data-delete-answerable href="#" style="position: absolute;top: 0;right: 0;"><span class="fa fa-minus-square-o" style="font-size: 1.2em;"></a>
    </li>
    <li style="list-style: none;"><a title="add dropdown answer" style="margin-top: 10px;" data-answerable href="javascript:void(0);"><span class="fa fa-plus-square-o" style="font-size: 1.2em;"></a></li>
  </ul>
  <%= render "quizzes/components/actions", tipe: "Dropdown" %>
</li>

This's “trigger” in dropdown menu for call javascript method :

<li>
  <a href="#" change-question data-replaceable="multiple-choices-html" data-type="multiple_choice">Multiple Choice</a>
</li>
<li>
  <a href="#" change-question data-replaceable="dropdown-html" data-type="dropdown">Dropdown</a>
</li>

This's my javascript method :

$(document).on('click', '[change-question]', function(e){
  e.preventDefault();
  el_id = $(this).parent().parent().parent().parent().parent().attr('id');
  selected_type = $(this).attr('data-type');
  replaceQuestion(el_id, selected_type);
});

function replaceQuestion(el_id, selected_type){
  // in here, replace code will be running
}

I don't have any idea about javascript code for changed every element html from multiple choice to dropdown. I had tried innerHTML like this issue but impossible for implement in my code. Can you help me guys?

By the way, pardom my bad english.

Thanks

Community
  • 1
  • 1
Putra S.
  • 11
  • 1
  • 1
    Is the question how to replace the `ol` with a `ul` with in-browser JavaScript (not Ruby)? – T.J. Crowder Jan 05 '17 at 07:44
  • 1
    The "dropdown" view doesn't look like any dropdown I've ever seen. The only difference I see is bullets (`*`) instead of `a.`, `b.`, `c.` – T.J. Crowder Jan 05 '17 at 07:45
  • Finally: When asking a question about doing things client-side, quote the HTML that the **browser** sees, not the Ruby code to generate it. It's not at all clear to me what is inserted for the `<%= render "quizzes/components/actions", tipe: "Multiple Choice" %>` token above, as what you've quoted for the options would be invalid HTML there. Your best bet is to put a **runnable** [mcve] using Stack Snippets (the `[<>]` toolbar button) in the question. – T.J. Crowder Jan 05 '17 at 07:48
  • You can show and hide the different view as per requirement instead of manipulating whole lot of DOM – ricky Jan 05 '17 at 07:52
  • replace data-type, id, class, & ol with a ul sir. every element html of multiple choice replace with dropdown. I'm also confused how to replace this code sir <%= render "quizzes/components/actions", tipe: "Multiple Choice" %> – Putra S. Jan 05 '17 at 07:57

0 Answers0