PHP result within a modal with CSS

Question

PHP result within a modal with CSS

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Hello, I'm trying to put the result of a quiz done with PHP and a bit of JS (used only to hide the previous question and show the next one) within a modal, done only with HTML and CSS, since I am building a website in which I have only HTML, PHP and CSS available. Here's what I have so far:

$totalcerto = 0;

if ($resposta1 == "B") { $totalcerto++; }
if ($resposta2 == "D") { $totalcerto++; }
if ($resposta3 == "A") { $totalcerto++; }
if ($resposta4 == "B") { $totalcerto++; }
if ($resposta5 == "A") { $totalcerto++; }

echo "$totalcerto / 5 respostas corretas";

? >

This is my PHP, I would like this $ total variable to appear within a modal, thanks for the attention.

php css modal

asked by anonymous 20.08.2015 / 13:56

2 answers

Prolog related error on a .xhtml page using NetBeans Is it necessary to put the element type inside the try?

score 1 · Answer 1

First create your modal with HTML and CSS, and leave it hidden, I suppose you already know how to do this, if you do not know, just ask to post the code.

Once you have created your php variable $ total as you did above, put the following JS:

document.getElementById('modal').innerHTML = "<?PHP echo $totalcerto; ?>";

Important

This JS must be at the end of the body or the onload event, otherwise the div with the modal id will not yet exist, so it will be returned undefined . Then create a function to show the modal when the user finishes the quiz.

score 1 · Answer 2

The question is kind of old, but come on.

First, I advise you to use the bootstrap, which will greatly facilitate your work. After putting the files in the folder and creating the references of them in your file, create a modal (it can be at the bottom of the page) with the following structure:

<div class="modal fade" tabindex="-1" role="dialog"> <!-- Esse modal já é oculto-->
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

In the above html structure, put your php content (in the case $ totalcerto) inside the div tag with class = 'modal-body', use php the normal way, as you would use on any html page.

In order to call modal, just create this script inside the <head> tag:

<script>
$(function(){
   $('#myModal').on('shown.bs.modal', function () {
     $('#myInput').focus();
   })
})
</script>

Just a note, your php code seems not to be efficient, because if you have 10 questions, you would have to repeat that code 10 times so that its $ total variable could add up to the amount of hits