Button following the rearrangement of the choices

I require the Show Answer 1/2 button to appear after the options, not alongside them as it currently does.

Here is my code:

window.onload = function() {
  randomize();
};

function randomize() {
  let questions = $(".question_div");

  questions.each(function() {
    let divCollection = $(this).find(".option_div");
    let divs = Array.from(divCollection);
    shuffleArray(divs);
    for (const div of divs) {
      $(this).append(div);
    }
  });
}

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}
label {
  display: inline-block;
  margin-left: 5px;
}

.option_div {
  float: left;
  width: 200px;
}

div.option_div:nth-child(odd) {
  clear: left;
}

.question_div {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question_form">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Some persons can do piece of work in 12 days. Twice the number of such persons will do half of that work in, how many days.</p>

      <p>&nbsp;</p>
      <input type="hidden" name="qid1" value="244">
      <div class="option_group">
        <div class="option_div">
          <input type="radio" name="radio1" id="checka1" value="A">
          <label for="checka1"><p>1</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkb1" value="B">
          <label for="checkb1"><p>2</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkc1" value="C">
          <label for="checkc1"><p>3</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkd1" value="D">
          <label for="checkd1"><p>4</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checke1" value="E">
          <label for="checke1"><p>None of these</p>
</label>
        </div>
      </div>
      
    </div>
      <button class="show_ans" type="button" name="showanswer1" id="showanswer1">Show Answer1</button>
    </div>

  Question 2
  <div class="question_container">
    <div class="question_div">
      <p>In a dairy farm, 40 cows eat 40 bags of husk in 40 days. In how many days one cow will eat one bag of husk.</p>
      <input type="hidden" name="qid2" value="245">
      <div class="option_group">
        <div class="option_div">
          <input type="radio" name="radio2" id="checka2" value="A">
          <label for="checka2"><p>&nbsp;44</p>
</label>
       </div>
     
       
        <button class="show_ans" type="button" name="showanswer2" id="showanswer2">Show Answer2</button>
    </div>
    
    </div>
  </div>
</div>

I want the Show Answer 1/2 button to be positioned below each set of options rather than beside them within the markup.

javascripthtmljquerycss

Answer №1

Your main question query seems to have been answered by the other two responses, but based on your comment, the code provided below could be of assistance in finding a solution.

To make it work properly, an additional div named question_div2 has been included.

window.onload = function() {
  randomize();
  randomizeq();
};

function randomize() {
  let questions = $(".question_div2");

  questions.each(function() {
    let divCollection = $(this).find(".option_div");
    let divs = Array.from(divCollection);
    shuffleArray(divs);
    for (const div of divs) {
      $(this).append(div);
    }
  });
}

function randomizeq() {
  let divCollection = $(".question_div1");
  let divs = Array.from(divCollection);
  shuffleArray(divs);
  $(".question_container").each(function(j) {
    $(this).append(divs[j]);
    $(this).append("<hr><br/>");
  });
}


function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}
label {
  display: inline-block;
  margin-left: 5px;
}

.option_div {
  float: left;
  width: 200px;
}

div.option_div:nth-child(odd) {
  clear: left;
}

.question_div2 {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question_form">

  Question 1
  <div class="question_container">
    <div class="question_div1">
      <div class="question_div2">
        <p>Some persons can do piece of work in 12 days. Twice the number of such persons will do half of that work in, how many days.</p>

        <p>&nbsp;</p>
        <input type="hidden" name="qid1" value="244">
        <div class="option_div">
          <input type="radio" name="radio1" id="checka1" value="A">
          <label for="checka1"><p>1</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkb1" value="B">
          <label for="checkb1"><p>2</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkc1" value="C">
          <label for="checkc1"><p>3</p>
</label></div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkd1" value="D">
          <label for="checkd1"><p>4</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checke1" value="E">
          <label for="checke1"><p>None of these</p>
</label>
        </div>
      </div>
      <br /><button class="show_ans show_answer_button" type="button" name="showanswer1" id="showanswer1">Show Answer1</button>
    </div>
  </div>

  Question 2
  <div class="question_container">
    <div class="question_div1">
      <div class="question_div2">
        <p>In a dairy farm, 40 cows eat 40 bags of husk in 40 days. In how many days one cow will eat one bag of husk.</p>
        <input type="hidden" name="qid2" value="245">
        <div class="option_div">
          <input type="radio" name="radio2" id="checka2" value="A">
          <label for="checka2"><p>&nbsp;44</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checkb2" value="B">
          <label for="checkb2"><p>45</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checkc2" value="C">
          <label for="checkc2"><p>48</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checkd2" value="D">
          <label for="checkd2"><p>40</p>
</label></div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checke2" value="E">
          <label for="checke2"><p>None of these</p>
</label>
        </div>
      </div>
      <br /><button class="show_ans show_answer_button" type="button" name="showanswer2" id="showanswer2">Show Answer2</button>
    </div>
  </div>
</div>

Answer №2

Successfully relocated the button to a higher level, and it did the trick. Hopefully, this is what you were looking for.

window.onload = function() {
  randomize();
};

function randomize() {
  let inquiries = $(".question_div");

  inquiries.each(function() {
    let divCollection = $(this).find(".option_div");
    let divs = Array.from(divCollection);
    shuffleArray(divs);
    for (const div of divs) {
      $(this).append(div);
    }
  });
}

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}
label {
  display: inline-block;
  margin-left: 5px;
}

.option_div {
  float: left;
  width: 200px;
}

div.option_div:nth-child(odd) {
  clear: left;
}

.question_div {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question_form">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Some persons can do piece of work in 12 days. Twice the number of such persons will do half of that work in, how many days.</p>;

      <p>&nbsp;</p>;
      <input type="hidden" name="qid1" value="244">;
      <div class="option_group">
        <div class="option_div">
          <input type="radio" name="radio1" id="checka1" value="A">;
          <label for="checka1"><p>1</p>;
</label>;
        </div>;
        <div class="option_div">;
          <input type="radio" name="radio1" id="checkb1" value="B">;
          <label for="checkb1"><p>2</p>;
</label>;
        </div>;
        <div class="option_div">;
          <input type="radio" name="radio1" id="checkc1" value="C">;
          <label for="checkc1"><p>3</p>;
</label>;
        </div>;
        <div class="option_div">;
          <input type="radio" name="radio1" id="checkd1" value="D">;
          <label for="checkd1"><p>4</p>;
</label>;
        </div>;
        <div class="option_div">;
          <input type="radio" name="radio1" id="checke1" value="E">;
          <label for="checke1"><p>None of these</p>;
</label>;
        </div>;
      </div>;

    </div>;
    <button class="show_ans" type="button" name="showanswer1" id="showanswer1">Show Answer1</button>;
  </div>;

  Question 2
  <div class="question_container">
    <div class="question_div">
      <p>In a dairy farm, 40 cows eat 40 bags of husk in 40 days. In how many days one cow will eat one bag of husk.</p>;
      <input type="hidden" name="qid2" value="245">;
      <div class="option_group">
        <div class="option_div">;
          <input type="radio" name="radio2" id="checka2" value="A">;
          <label for="checka2"><p>&nbsp;44</p>;
</label>;
        </div>;
        <div class="option_div">;
          <input type="radio" name="radio2" id="checkb2" value="B">;
          <label for="checkb2"><p>45</p>;
</label>;
        </div>;
        <div class="option_div">;
          <input type="radio" name="radio2" id="checkc2" value="C">;
          <label for="checkc2"><p>48</p>;
</label>;
        </div>;
        <div class="option_div">;
          <input type="radio" name="radio2" id="checkd2" value="D">;
          <label for="checkd2"><p>40</p>;
</label>;
        </div>;
        <div class="option_div">;
          <input type="radio" name="radio2" id="checke2" value="E">;
          <label for="checke2"><p>None of these</p>;
</label>;
        </div>;
      </div>;

    </div>;
    <button class="show_ans" type="button" name="showanswer2" id="showanswer2">Show Answer2</button>;
  </div>;
</div>

Answer №3

The challenge you're encountering is a result of appending the options to the question tag using JavaScript. Utilizing .append() will insert HTML content after what's currently inside the element you're appending to. This isn't an issue with CSS or HTML; simply relocate the button to the parent of question_div (after the closing tag of question_div).

Update: To resolve the problem you're facing, I enhanced the randomizeq() function to select the button and appends it just before the <hr> tag:

function randomizeq() {
   let divCollection = $(".question_div");
  let divs = Array.from(divCollection);
  shuffleArray(divs);
  $(".question_container").each(function(j) {
    $(this).append(divs[j]);
    $(this).append($(`#showanswer${j+1}`));
    $(this).append("<hr><br/>");
  });
}

You can also view a working snippet on jsFiddle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilize an HTML file open dialog box to gain access to the server's

Is it feasible to implement a file open dialog box that displays files and directories from the server's file system? In my web application, there is a need for users to select a file that resides on the server. Are there any plugins available for th ...

javajavascripthtmlfile-upload

Using Jquery to select a div within a table using nested selectors

Utilizing jQuery mobile datepicker, I aim to capture the calendar click event. I have two datepicker divs that I wish to handle separately. Currently, I'm using the following selector which is functioning correctly. However, I now want to manage them ...

jqueryjquery-uijquery-mobile

What is the most effective way to determine when the browser is in offline mode?

My web application features several Ajax components that refresh periodically within a dashboard-style page. I am looking to implement a feature where, in the absence of Internet connection, the content on the page remains static and displays a message in ...

javascriptajaxoffline-mode

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

Snippet: .details-section{ background-color: rgb(83, 83, 83); height: 200px; } .icon-container{ border: 2px solid #c49b63; width: 90px; height: 90px; transition: 0.5s ease; } .box i{ font-size: 60px; color: black; margin-top: 13px ...

javascripthtmlcssbootstrap-4

Error: Unable to access the 'inspectedWindow' property because it is undefined

I need assistance with building a chrome-extension. I encountered an issue when running the following code: document.addEventListener('DOMContentLoaded', function() { chrome.devtools.inspectedWindow.getResources(function(response){ c ...

javascriptgoogle-chrome-extensiongoogle-chrome-devtools

Device identification verification similar to that of Google and Facebook

Is there a way to uniquely identify a user's device during authentication so that a second factor of authentication (like SMS) can be required if the user is logging in from an unfamiliar device? Both Google and Facebook have this feature, and it does ...

htmliosfacebooksecurityweb

PrestaShop - Using ajax to update a JSON object with PUT request

I've been attempting to update a JSON object (such as a customer), but I keep encountering the following error: "NetworkError: 405 Method Not Allowed - ..." Here's my code (index.js): var testWebService = angular.module('testWebService& ...

javascriptajaxweb-servicesprestashop

Tips for showcasing a single item from an array every week

I'm in the process of developing a program where I share a new memory verse every week. Currently, I have code set up that displays each item with a delay based on my preference. However, I'd like to figure out how to showcase one item from an ar ...

javascriptarraysloopstime

How can a controller be used to access and modify data from various partials?

I need assistance with handling multiple ng-models spread across 2 partial HTML files. Here is the content of partial1.html: <input ng-model="A" /> //user input for A <input ng-model="B" /> //user input for B <input ng-model="C" /> //us ...

javascriptangularjs

Nested React Native function

I have a question that may be simple: When I press the Logout button, I want to call the function handleRequest, but I keep getting an error saying that undefined is not an object. I believe I need to rearrange my functions, but being new to React Native, ...

javascriptreactjsreact-native

The div does not allow elements to be centered

I am facing an issue where elements are not centering on my div. I have tried numerous solutions (so many that I finally decided to create a Stack Overflow account), but nothing seems to work. Interestingly, the elements center on PC but for some reason, ...

htmlcss

Error (2322) Occurs When TypeScript Class Implements Interface with Union Type Field

I'm having trouble with error code 2322 popping up unexpectedly. Could you please take a look at this code snippet for me? interface Fish { alive: string | boolean; } class FishClass implements Fish { alive = 'Yes' constructor() { ...

javascripttypescriptclasstypesfrontend

Issue with button click functionality in Phonegap Android app

I have encountered a problem with the button on my phonegap HTML page. I have set up a button click event and an AJAX call to a webservice URL, but currently, the button click event is not being triggered. The error message shown in logcat is... stale tou ...

androidjqueryajaxcordova

The ng-model does not bind properly when the input value is set through JavaScript instead of directly from

I'm encountering an issue with a text box in my project. The data is being populated using JavaScript, which reads a QR code and sets the value accordingly. I am using ng-model to bind to a variable in my controller, and while it works perfectly when ...

javascriptjqueryangularjsangular-ngmodel

Can you explain how to incorporate the ternary operator in a jQuery script that is part of an

Working with core PHP, jQuery, and MySQL, I have implemented 2 dependent dropdowns in my project. The first dropdown for the company list is populated directly from the database using a query on the same page. For the second dropdown containing the employ ...

jquerymysqlajaxdrop-down-menuternary-operator

JavaScript method for calculating the number of days between two dates on a monthly basis

Currently facing a dilemma where I need to determine the number of days between two specific dates selected from a bootstrap daterangepicker on a monthly basis. For example, if we have: start date = 07/19/2018 end date = 09/28/2018 The desired outcome ...

javascriptcalendarbootstrap-daterangepicker

Combining data in Node.js using arrays of objects

Is there a way to efficiently join arrays in Node.js while maintaining performance, especially when dealing with large arrays in production? A = [ { a: 1, b: 'a' }, { a: 2, b:'b' }, { a: 3, b: 'a' }, { a: 4, b: 'b' ...

javascriptarraysnode.jsmultidimensional-arrayset

Utilizing jQuery and Bootstrap CDNs as the source in the index.ejs file

As a beginner in web development, I was tasked with creating a website using node-js & express during my semester. My team and I decided to use a pre-designed website template that included files like bootstrap.min.js, bootstrap.min.css & jquery-2. ...

jquerynode.jsexpressbootstrap-4ejs

Using the import statement to bring in module one from "./two" is causing a malfunction in my JavaScript file while working with Laravel 5.4 broadcasting using Pusher

Node Version 8.6.0 npm version 5.3.0 Chrome Issue (Version 61.0.3163.100) Error: Unexpected token import Mozila Problem (Version 56.0 (64-bit)) SyntaxError: Only top-level import declarations are allowed import one from "./two"; ...

javascriptnode.jslaravel-5pusher

What is the best way to show a spinner or progress bar while loading an image?

I'm currently developing a React app using Next.js to display various images. The user can click on an item from the list on the left, which then displays three images on the right. These images are rendered using the Next.js Image component: ...

javascriptreactjsnext.jsreact-image