Jump to content

Recommended Posts

Hello.

I am trying to code a voting poll in php, but don't know how to get started. I came across a javascript type quiz that seems to do what I have in mind, but it needs to be tweaked and coded in php.

The reason being that anyone can browse the javascript source code and cheat. Anyhow please see the attached files that show what I am trying to accomplish.

The code has 3 files index.html, quiz.css and quiz.js

 

<html>
	<head>
		<title>Website - Voting Poll (Javascript)</title>
		<link rel="stylesheet" href="quiz.css">
		<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
	</head>
	<body>
		<div id="container">
            <h1>Voting Poll >> In Less Than A Minute</h1>
   			<br/>
  			<div id="quiz"></div>
    		<div class="button" id="next"><a href="#">Next</a></div>
    		<div class="button" id="prev"><a href="#">Prev</a></div>
    	</div>
        <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
		<script src="quiz.js"></script>
	</body>
</html>
body
{
    font-family: 'Josefin Sans', sans-serif;
}
h1 {
    text-align: center;
}
.button
{

    width: 80px;
    height: 25px;
    text-align: center;
    float:right;
    background-color: #fff;
    margin: 0 2px 0 2px;
    cursor: pointer;
}
.button a
{
    text-decoration: none;
    color: #555;
    line-height: 25px;
}
#container
{
    width:50%;
    margin: 150px auto;
    padding: 50px 30px;
    background-color: #3f51b5;
    border-radius:3px;
    color: #fff;
    box-shadow: 0 0 10px 0 #999;
}
ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 500px;
}
ul li
{
    background: #223394;
    width: 200px;
    margin: 10px;
    padding: 5px;
    display: inline-block;
}
#prev
{
    display:none;
}
#start
{
    display:none;
    width: 100px;
}
input[type="radio"]{
    cursor: pointer;
}
(function()
 {
  var allQuestions = [{
    question: "IMAGE 1 .jpg goes here",
    options: ["Yes", "No"],
    answer: 0
  }, {
    question: "IMAGE 2 .jpg goes here",
    options: ["Yes", "No"],
    answer: 1
  }, {
    question: "IMAGE 3 .jpg goes here",
    options: ["Yes", "No"],
    answer: 1
  },{
    question: "IMAGE 4 .jpg goes here",
    options: ["Yes", "No"],
    answer: 0
  }, {
    question: "IMAGE 5 .jpg goes here",
    options: ["Yes", "No"],
    answer: 1
  },{
    question: "IMAGE 6 .jpg goes here",
    options: ["Yes", "No"],
    answer: 0
    }];

  var quesCounter = 0;
  var selectOptions = [];
  var quizSpace = $('#quiz');

  nextQuestion();

  $('#next').click(function ()
    {
        chooseOption();
        if (isNaN(selectOptions[quesCounter]))
        {
            alert('Please select an option !');
        }
        else
        {
          quesCounter++;
          nextQuestion();
        }
    });

  $('#prev').click(function ()
    {
        chooseOption();
        quesCounter--;
        nextQuestion();
    });

  function createElement(index)
    {
        var element = $('<div>',{id: 'question'});
        var header = $('<h2>Question No. ' + (index + 1) + ' :</h2>');
        element.append(header);

        var question = $('<p>').append(allQuestions[index].question);
        element.append(question);

        var radio = radioButtons(index);
        element.append(radio);

        return element;
    }

  function radioButtons(index)
    {
        var radioItems = $('<ul>');
        var item;
        var input = '';
        for (var i = 0; i < allQuestions[index].options.length; i++) {
          item = $('<li>');
          input = '<input type="radio" name="answer" value=' + i + ' />';
          input += allQuestions[index].options[i];
          item.append(input);
          radioItems.append(item);
        }
        return radioItems;
  }

  function chooseOption()
    {
        selectOptions[quesCounter] = +$('input[name="answer"]:checked').val();
    }

  function nextQuestion()
    {
        quizSpace.fadeOut(function()
            {
              $('#question').remove();
              if(quesCounter < allQuestions.length)
                {
                    var nextQuestion = createElement(quesCounter);
                    quizSpace.append(nextQuestion).fadeIn();
                    if (!(isNaN(selectOptions[quesCounter])))
                    {
                      $('input[value='+selectOptions[quesCounter]+']').prop('checked', true);
                    }
                    if(quesCounter === 1)
                    {
                      $('#prev').show();
                    }
                    else if(quesCounter === 0)
                    {
                      $('#prev').hide();
                      $('#next').show();
                    }
                }
              else
                {
                    var scoreRslt = displayResult();
                    quizSpace.append(scoreRslt).fadeIn();
                    $('#next').hide();
                    $('#prev').hide();
                }
        });
    }

  function displayResult()
    {
        var score = $('<p>',{id: 'question'});
        var correct = 0;
        for (var i = 0; i < selectOptions.length; i++)
        {
          if (selectOptions[i] === allQuestions[i].answer)
          {
            correct++;
          }
        }
        score.append('Final TOTAL is ' + correct + ' out of ' +allQuestions.length);
        return score;
  }
})();

 

APPnotes.png

flow_chart.png

Example.png

Share this post


Link to post
Share on other sites

And you want US to write your php script from this stuff?

I Don't Think So.

Share this post


Link to post
Share on other sites

The code you found looks like a training thing about Jquery and has little to do with the actual problem and more about how Jquery does really nice stuff.

I wrote everything from scratch, almost. Lots of tweaking needed. Fast explanation about the JS:

When page loads we set up a new XMLHttpRequest() so we can use AJAX to get to the PHP file. The rest is a function called by the 'submit' button.

I use a loop to query all the input tags and count the number of radio buttons selected. This could have been a little more precise in the tag called. - 6 questions so I need 6 checked buttons.

I use a IF/ELSE section for that. You will need to handle the Not Equal section. myString will be the values of the selections separated by a comma. This string is sent to my 'test5.php' file by the rest of the code - right after I remove the comma at the end of the string.

 

In the PHP file I make a string of correct answers $mine. I then convert that string and the string I received via the $_GET[] into arrays. Followed by a for loop to compare each answer to the master array and send the outcome back to the main file, where it is posted.

The main file has been moved and worked on in various browsers and text editors - I think it's good code, but at this point no guarantees cause I'm done working on it today.

Main File HTML

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Website - Voting Poll (Javascript)</title>
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
	<style>
	body{
	    font-family: 'Josefin Sans', sans-serif;
	}
	h1 {
	    text-align: center;
	}
	#container
	{
	    width:50%;
	    margin: 150px auto;
	    padding: 50px 30px;
	    background-color: #3f51b5;
	    border-radius:3px;
	    color: #fff;
	    box-shadow: 0 0 10px 0 #999;
	}
	ol
	{
	    list-style-type: none;
	    padding: 0;
	    margin: 0;
	    width: 500px;
	}
	ol li
	{
	    background: #223394;
	    width: 200px;
	    margin: 10px;
	    padding: 5px;
	}
	input, label{
	    cursor: pointer;
	}
	input[value="no"]{
	    margin-left: 45px;
	}
	button{
	  width : 70px;
	  margin-left: 10px;
	}
	</style>
	</head>
	<body>
	<div id="container">
	  <h1>Voting Poll >> In Less Than A Minute</h1>
	  <div id="proof"></div>
	  <ol>
	    <li>This is question #1<br>
	      <label for="yes1"><input type="radio" name="q1" value="yes" id="yes1">Yes</label>
	      <label for="no1"><input type="radio" name="q1" value="no" id="no1">No</label>
	    </li>
	    <li>This is question #2<br>
	      <label for="yes2"><input type="radio" name="q2" value="yes" id="yes2">Yes</label>
	      <label for="no2"><input type="radio" name="q2" value="no" id="no2">  No</label>
	    </li>
	    <li>This is question #3<br>
	      <label for="yes3"><input type="radio" name="q3" value="yes" id="yes3">Yes</label>
	      <label for="no3"><input type="radio" name="q3" value="no" id="no3">  No</label>
	    </li>
	    <li>This is question #4<br>
	      <label for="yes4"><input type="radio" name="q4" value="yes" id="yes4">Yes</label>
	      <label for="no4"><input type="radio" name="q4" value="no" id="no4">  No</label>
	    </li>
	    <li>This is question #5<br>
	      <label for="yes5"><input type="radio" name="q5" value="yes" id="yes5">Yes</label>
	      <label for="no5"><input type="radio" name="q5" value="no" id="no5">  No</label>
	    </li>
	    <li>This is question #6<br>
	      <label for="yes6"><input type="radio" name="q6" value="yes" id="yes6">Yes</label>
	      <label for="no6"><input type="radio" name="q6" value="no" id="no6">  No</label>
	    </li>
	  </ol>
	  <button type="button" onclick="sendTest()">Submit
	</div>
	 
	<script>
	var xhttp = new XMLHttpRequest();
	function sendTest(){
	  var myObj = {"q1":"maybe", "q2":"maybe", "q3":"maybe", "q4":"maybe", "q5":"maybe", "q6":"maybe"};
	  var counter = 0;
	  x = document.querySelectorAll("input");
	  for (i = 0; i < x.length; i++) {
	    if(x[i].checked){
	      counter++;
	    }
	  }
	  if(counter != 6) {
	    document.getElementById("proof").innerHTML="ERROR";
	    return;
	  }else{ 
	    for (i = 0; i < x.length; i++){
	      if(x[i].checked){
	        myString += x[i].value + ",";
	      }
	    }
	  var myString = JSON.stringify(myObj);
	  } 
	  xhttp.onreadystatechange = function() {
	    if (this.readyState == 4 && this.status == 200) {
	      document.getElementById("proof").innerHTML = this.responseText;
	    }
	  }
	  xhttp.open("GET", "test5.php?myString", true);
	  xhttp.send();
	}
	</script>
	</body>
	</html>
	

 

The file it calls - test5.php

	<?php
	$str= $_GET["q"];
	$mine = 'yes,no,yes,no,yes,no';
	$corr = 0;
	$wron = 0;
	$arr = explode(',', $str);
	$arry = explode(',', $mine);
	 
	for ($i=0; $i<6; $i++){
	    if($arr[$i] == $arry[$i]){
	        $corr++;
	        echo $corr.' correct<br>';
	    }else{
	        $wron = $wron + 1;
	        echo $wron.' wrong<br>';
	    }
	}
	echo 'You have '.$corr.' correct and '.$wron.' wrong.';
	?>
	

 

I really hope this is a giant help. If not we're always here, sort of.

Edited by NotSunfighter

Share this post


Link to post
Share on other sites

NotSunfighter, thank you for trying to help. 

I don't feel welcomed here anymore and I will be moving on to a better forum where there are friendly people like yourself who want to help others.

 

As for you ginerjm get your head out of your ass you miserable son of a bitch. You sound like a bitter man. I bet you walk through life with a chip on your shoulder.

Go do something productive and get that negative attitude out of your system. If you don't have nice things to say, then stay quiet next time and move on.

 

Share this post


Link to post
Share on other sites

Jayfromsandiego give my script a try please and post here for a little while. Let me know what you think of the script - we can fix any problems that you have with it. I am new here myself - Most posts I see here are to help people with problems.

ginerjm maybe a little ruff with his answers, but he does give good advice. I think he just didn't look at what you posted very close, but he did look.

When I did this my eye sight was not up to it's potential

 

Don't go away mad - stay and get the help you need.- Just had the lids operated on, so I could not see the pictures you loaded and just went with the code.

Share this post


Link to post
Share on other sites

I'd start with the data. Hard-coding the questions and answers into the program isn't the best way. If you don't want to use a database then IMO, for this type of application, an ini file format is a good, easily editable and easily processed option.

Something like this, which gives you simple yes/no or multiple choice options...

[1]
Q="Is Sydney the capital of Australia?"
A="Yes"
B="No"
Answer=B

[2]
Q="What is the next number in this series 1, 3, 5, 7, 11, 13, ... ?"
A=15
B=17
C=19
Answer=B

[3]
Q="How high is Mount Everest?"
A=8,254m
B=8,592m
C=8,848m
D=9,121m
Answer=C

[4]
Q="When was Albert Einstein born?"
A=1879
B=1899
C=1909
D=1919
Answer=A

[5]
Q="How many symphonies did Mozart write?"
A=40
B=41
C=43
D=45
Answer=B

[6]
Q="What was the U.S. President's name in 2002?"
A="Bill Clinton"
B="George W Bush"
C="Barack Obama"
D="Donald Trump"
Answer=D

That should give you a starting point. (Hint: https://www.php.net/parse_ini_file)

Share this post


Link to post
Share on other sites

NO I didn't look at the code.  People who post reams of code without thought for the people unfamiliar with the thoughts, ideas and processes being used and expect it to be resolved for them just aren't thinking.

If you want help try and make it possible for others to help you - that is my point.  Do some debugging; isolate the location of the problem and dig into it and only then post  it and ask for help.

PS - judging from the timbre of your own post I have to wonder how miserable you must be to write that.  Tsk, tsk....

Share this post


Link to post
Share on other sites
On 1/21/2020 at 10:43 AM, Jayfromsandiego said:

NotSunfighter, thank you for trying to help. 

I don't feel welcomed here anymore and I will be moving on to a better forum where there are friendly people like yourself who want to help others.

As for you ginerjm get your head out of your ass you miserable son of a bitch. You sound like a bitter man. I bet you walk through life with a chip on your shoulder.

Go do something productive and get that negative attitude out of your system. If you don't have nice things to say, then stay quiet next time and move on.

Good luck to you on that Jayfromsandiego.  Try to post on Stackoverflow, or any of our myriad competitors.  I certainly hope you will, if only so that you will find after the time it takes for you to register on each community and (re)post your "question" then wait for a response that may or may not ever come, only to find your question closed or ignored, or with a similar response to those you got here.  

This forum has a longstanding tradition of acceptance and hand holding that goes way beyond vast majority of programming forums that exist.  As your question boils down to:  "Here's what I want, code it for me?" don't be surprised when you get responses like ginerjm in even more blunt fashion.  Meanwhile,  NotSunfighter decided to take you up on your challenge and coded you up a solution.  

And just to be clear, noone (perhaps with the exception of NotSunfighter, after having spent valuable time trying to help you) cares whether you quit this forum.  We are all volunteers.  

ginerjm may have been blunt, but he's right.  We can all code.  The vast majority of the people who answer questions like yours are professional developers.  We are here to teach and share, and sometimes to simply tell someone the truth.  

The best I can hope for you at this moment is that you take a good hard look in the mirror at your own attitudes and approaches, and as the old saying goes "Don't cut off your nose to spite your face."

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.