Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to create a revision website for teens, and i want to implement a test using radio buttons and with a submit at the bottom which will tell them wether their answers are correct or not. The answers will all be set to be one of the 4 answers. Can anyone explain the easiest way to do this just using hard code as i am reluctant to use a database as at the moment it is just local.
Save this in a file named quiz.html, or any name you want (just keep the .html extension), and try it:
<html>
<head>
<title>Quiz</title>
<style type="text/css">
.valid{color:#1F1}
.invalid{color:#F11}
#overall{font-size:2em;font-weight:bold}
</style>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
</head>
<body>
<div class="form">
<div class="form-content"></div>
<div><input type="button" id="btnSubmit" value="Submit"/></div>
<div id="overall"></div>
</div>
<script type="text/javascript">
// Questions and answers
// You can add questions from here >>>>>
var questions = [
{"question":"Question 1","possibleAnswers":{"1":"Answer 1-1", "2":"Answer 1-2", "3":"Answer 1-3","4":"Answer 1-4"},"validAnswer":"3"},
{"question":"Question 2","possibleAnswers":{"1":"Answer 2-1", "2":"Answer 2-2", "3":"Answer 2-3","4":"Answer 2-4"},"validAnswer":"1"}
];
// To here <<<<
// Building quiz
var form = $(".form-content");
for (var i=0;i<questions.length;i++) {
var q = questions[i];
var qHtml = '<div id="dq'+i+'"><div>'+q.question+'</div><div>';
var pas = q.possibleAnswers;
$.each(pas, function(j, val) {
qHtml = qHtml + '<input type="radio" name="q'+i+'" value="'+j+'">'+val+'<br/>';
});
qHtml = qHtml + '<div class="result"></div></div>';
form.append($(qHtml));
}
var overall = $('#overall');
// Checking answers on button click
$('#btnSubmit').click(function(e){
var goodAnswers = 0;
for (var i=0;i<questions.length;i++) {
var q = questions[i];
var qDom = form.find('#dq'+i);
var v = qDom.find('input[name="q'+i+'"]:checked').val();
var rDom = qDom.find('.result');
if (v == q.validAnswer) {
rDom.removeClass('invalid').addClass('valid').html('Valid answer');
goodAnswers++;
} else {
rDom.removeClass('valid').addClass('invalid').html('Invalid answer');
}
}
overall.html('Final result: ' + goodAnswers + '/' + questions.length);
});
</script>
</body>
</html>
It's a HTML/JavaScript only webpage (not secure for somebody with JavaScript knowledges, though). Pay attention to the part that says "You can add questions from here". It's a javascript array, and you can add as many questions, with as many options as you wish. Just keep the pattern of each question element:
{
"question":"Here goes the question",
"possibleAnswers": // List of possible answers, "value":"text" pairs, as a JSON object
{
"1":"Answer 1",
"2":"Answer 2",
"3":"Answer 3",
...
"N":"Answer N"
},
"validAnswer":"3" // Value of the valid answer
}
EDIT 1: Modified to use radio buttons instead of dropdown.
EDIT 2: Removed logging, and added overall result.
This can help you start. Place all of the code in a file called quiz.php and try it.
HTML:
<html>
<form action='quiz.php' method='POST'>
<input type='radio' name='sex' value='male'>Male<br>
<input type='radio' name='sex' value='female'>Female<br>
<input type='submit' value='submit'>
</form>
</html>
PHP:
<?php
$q1 = $_POST['sex'];
if($q1=='male')
{
echo 'correct!';
}
?>
Simple example of submitting user input and doing something with it in PHP :
HTML
<form action='myphpfile.php' method='POST'>
What brand has a model called Q7 ?
<select name="question1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">submit</input>
</form>
PHP , myphpfile.php
<?php
$answer1 = "audi";
if($_POST['question1'] == $answer1){echo $answer1.' = is the right answer !'}
else{echo 'Wrong answer'}
?>
here you go, an idea for you
<?php
//Set Answers//
$q1_answer = 'b';
$q2_answer = 'a';
$q3_answer = 'c';
$form = '<form action="" method="post">
Question 1<br />
A<input type="radio" name="q1" value="a"/>
B<input type="radio" name="q1" value="b"/>
C<input type="radio" name="q1" value="c"/><br />
Question 2<br />
A<input type="radio" name="q2" value="a"/>
B<input type="radio" name="q2" value="b"/>
C<input type="radio" name="q2" value="c"/><br />
Question 3<br />
A<input type="radio" name="q3" value="a"/>
B<input type="radio" name="q3" value="b"/>
C<input type="radio" name="q3" value="c"/><br />
<input type="submit" name="submit" value="submit" />
</form>';
if (isset ($_POST['submit'])){
if ($_POST['q1'] === $q1_answer){
$q1_res = 'correct';
}else{$q1_res = 'incorrect';
}
if ($_POST['q2'] === $q2_answer){
$q2_res = 'correct';
}else{$q2_res = 'incorrect';
}
if ($_POST['q3'] === $q3_answer){
$q3_res = 'correct';
}else{$q3_res = 'incorrect';
}
$display = 'Q1 = '.$q1_res.'<br>
Q2 = '.$q2_res.'<br>
Q3 = '.$q3_res.'<br>';
}else{
$display = $form;
}
echo $display;
?>
Can anyone explain the easiest way to do this just using hard code as i am reluctant to use a database as at the moment it is just local.
Your solution is to use Javascript and do your best to obfuscate the answer file. Since your question does not tell use if you have PHP or another server solution like node.js available we have to assume that HTML/Javascript is all that is at your disposal.
StackOverflow usually advises against external links as answers but I'm providing these here as support links to check out.
https://github.com/jrue/JavaScript-Quiz
http://uhaweb.hartford.edu/kelley/quiz/quizmaker-gen.html
Fundamentally, using the github example you create a quiz file in javascript, personally unlike the github example I'd put this in its own .js file and link it instead of including in the HTML header. I'd also obfuscate the .js file as to disguise the potential answers to source code snoopers, there are plenty of tools available to do this online.
Ultimately a PHP or Node.js solution will be your best choice for a secure test if you have those available. Please consider revising your question to help us answer it better.
Related
I am trying to build an HTML form. For one of the questions, I want the user to be able to select exactly two choices.
I tried building two radio questions (which I understand only accept one choice) with the same 4 options, but I don't want the user to be able to select the same option twice.
<form action = "\new" method = post target="_blank" id="form">
<option>Option 1</option><br>
Question 1:
<input type="radio" name="S1" value = 0 checked>C1<br>
<input type="radio" name="S1" value = 1>C2<br>
<input type="radio" name="S1" value = 2>C3<br>
<input type="radio" name="S1" value = 3>C4<br>
<br>
Question 2:
<input type="radio" name="S2" value = 0 checked>C1<br>
<input type="radio" name="S2" value = 1>C2<br>
<input type="radio" name="S2" value = 2>C3<br>
<input type="radio" name="S2" value = 3>C4<br>
</form>
//I want the form to output (S1,S2), but S1 cannot equal S2
With this code, the user can still choose the same choice for both questions. How do I fix this?
I figured it out. I added this JavaScript at the bottom of the HTML document.
<script>
function validate(){
var C1 = Number($("input[name='S1']:checked").val());
var C2 = Number($("input[name='S2']:checked").val());
if (C1==C2){
return false;
}
return true;
}
function init(){
document.getElementById('form').onsubmit = validate;
}
window.onload = init;
</script>
Hope this helps anyone else who was struggling like me!
For the last few days I've been trying to make this relatively simple radio button -- similarly to this https://donate.unhcr.org/gb-en/general/ -- At the end of their page where they choose which amount they want to donate. I'm doing a bit of work for some charity and they'd like to have a similar form.
Through many hours of googling and trying out plug-ins and many more hours of trying to code it myself I've ended up in a very frustrating place with this.
Could anyone point me in the right direction please, as to what to learn exactly or search for exactly?
Thank you!
A bit of jquery would achieve this. If you wanted it to change the link to the button at the bottom you could have a setup like this:
<label><input type="radio" name="option" value="1" /> Option 1</label><br />
<label><input type="radio" name="option" value="2" /> Option 2</label><br />
<label><input type="radio" name="option" value="3" /> Option 3</label><br />
<a id="mylink" href="/defaultpage">This link will go to <span>/defaultpage</span></a>
<script>
$('label').on('click', function() {
var thisval = $(this).find('input').val();
var newhref = '/defaultpage';
if (thisval == 1) {
newhref = '/mypage1';
} else if (thisval == 2) {
newhref = '/mypage2';
} else if (thisval == 3) {
newhref = '/mypage3';
}
$('#mylink').attr('href', newhref);
$('#mylink').find('span').html(newhref);
});
</script>
For this you would have to include JQuery on your site, but I think Wordpress includes it by default.
Have a look at my jsfiddle to see it working:
https://jsfiddle.net/fLado8e5/
Wordpress uses PHP, so here is an example of radio button with html and php
$gender = "";
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
The styling is done with toggling css classes. Hope this points you in the right direction.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
How do you display a error depending on the length of the text inputted to a password field? For example if a user inputted 10 characters but the limit was 5 "Limit is 5 characters" would be displayed in a DIV. Here is my code:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<title>Project</title>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<span class="main_text">Textbox</span><br>
<input name="textbox1" type="password" class="textbox1" placeholder="Enter Password" autofocus><br><br>
</div>
</body>
</html>
Any help will be greatly appreciated. Thanks, Omar.
Here is a example of what I mean:
Okay i think it'll help you.
In PHP:
<?php
if(strlen($_POST['textbox1']) > 16)
echo 'Limit is 16 characters';
else
// log in
?>
In JavaScript:
<!doctype html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function passwordCheck(y){
var x = y.value;
if(x.length>5) {
document.getElementById("error").innerHTML="<font color='red'>Limit is 16 characters</font>";
} else {
if(x.length<=16) {
document.getElementById("error").innerHTML="";
}
}
}
</script>
</head>
<body>
<div class="container">
<span class="main_text">Textbox</span><br>
<input name="textbox1" onkeyup="passwordCheck(this);" type="password" class="textbox1" placeholder="Enter Password" autofocus><br><br>
<div id="error"></div>
</div>
</body>
</html>
Hope it'll help you.
strlen is what you are looking for. It counts letters in the string.
<?php
if(strlen($_POST['textbox1']) > 5) {
echo 'Limit is 5 characters';
}
else {
// log in
}
?>
jQuery solution, i think more elegant:
$('.textbox1').keydown(function() {
if($(this).length > 5) {
$('#error_div').html('Limit is 5 characters');
}
});
You can use javascript keyup event. Which check length of the text box..
You need understand 2 layers:
usability layer: put some Javascript, HTML codes into your page to turn it more easy to use.
security layer: put a Webservice Language (php, c#, python, etc.) to avoid error on your data, malicious injection, etc.
So what you need is both:
Using Javascript you will use attribute object.length and on PHP the attribute strlen($variable)
Hope this helped.
The best practice is validation form data on server-side and client-side. Always implement rule that says: "Never trust users".
Your php-code is:
<?php
$errors = [];
if(isset($_POST['submit'])){
if(isset($_POST['password']) && strlen($_POST['password']) > 5){
$errors[] = 'Limit is 5 characters';
}
}
?>
<div class="container">
<php if(!empty($errors)): >
<div class="messages"><?php join('<br/>', $errors) ?></div>
<?php endif; ?>
<form action="" method="post">
<span class="main_text">Textbox</span><br>
<input name="password" type="password" class="textbox1" placeholder="Enter Password" autofocus><br><br>
<input type="submit" name="submit" value="Submit"/>
</form>
</div>
Try this, Added <form> tag and submit button
<form action="index.php" method="post">
<div class="container">
<span class="main_text">Textbox</span><br>
<input name="textbox1" type="password" class="textbox1" placeholder="Enter Password" autofocus onkeyup="PasswordChecker(this)"><br><br>
<span id="passwordCheck"></span>
<?php
if(isset($_POST['submit'])){
if(strlen($_POST['textbox1']) > 5){
echo 'Limit is 5 characters';
}
}
?>
</div>
<input type="submit" name="submit" value="Submit">
</form>
Javascript:
function PasswordChecker(d){
if(d.value.length>5){
document.getElementById("passwordCheck").innerHTML = 'Password limit is 5';
}
}
I'm creating a page wherein I would fill up for an account creation. One of the forms there is answering a secret question. It is in select tag then the questions are in the option tag. After filling up the form, a prompt box will appear for the user to answer the Question he/she choose. If the right input is typed, overall, the user will be successfully logged in. But if incorrect, it will be Unsuccessfully logged in.
I can't figure out where I would put the answers of the diff. questions in the input for it to be successfully logged in when the correct answer is typed in the prompt at the output. Here is the code I did. Please correct this.
<HTML><HEAD><TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
var x = form.password.value=='Password';
var y = form.username.value=='Username';
var z =form.questions.value;
prompt ("What is your secret answer?","Type your answer here");
if (x&&y&&z)
{
alert("You are successfully Logged!");
}
else
{
alert("You are unsuccessfully Logged!");
}
}
</SCRIPT></HEAD><BODY>
<FORM NAME="myform" METHOD="GET">Username<BR>
<INPUT TYPE="text" NAME="username" VALUE="Username"><P>
<FORM NAME="myform" METHOD="GET">Password<BR>
<INPUT TYPE="Password" NAME="password" VALUE="Password"><P>
<form name="myform" method="get">
Secret Question<BR>
<select name="questions" size="1">
<option value="one"> Where is your Birthplace?</p></option>
<option value="two"> How old are you? </option>
<option value="three"> What is your favorite show?</option>
</select>
<INPUT TYPE="button" NAME="button" Value="submit" onClick=" testResults(this.form)">
</FORM>
</BODY>
</HTML>
See this fiddle:
http://jsfiddle.net/FqFLU/1/
var z =form.questions.value;
var ans=prompt ("What is your secret answer?","Type your answer here");
if (x&&y&&z==ans)
{
//Logged
}
I have to make a wordpress plugin of a simple html form that do simple calculation. Here is my form code.
<html>
<head>
<title>Calculate</title>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var ansD = document.getElementById("answer");
ansD.value = val1 + val2;
}
</script>
</head>
<body>
<input type="text" id="value1" name="value1" value="1"/>
<input type="text" id="value2" name="value2" value="2"/>
<input type="button" name="Sumbit" value="Click here"
onclick="javascript:addNumbers()"/>
<input type="text" id="answer" name="answer" value=""/>
</body>
</html>
Thanks
Try looking at this information sources, so that you can integrate your page with wordpress.
http://codex.wordpress.org/Writing_a_Plugin
http://corpocrat.com/2009/12/27/tutorial-how-to-write-a-wordpress-plugin/
I would say this is more of a design task than a pure coding task.
When it comes to outputting your code somewhere on the page generated by WordPress I would suggest using wp_enqueue_script() to include your javascript. Alternatively you might use the wp_head action if you really need inline script code. To print the actual form element, on option would be to hook on to the the_content filter and just append/prepend the content. Other options includes creating a shortcode to allow the user to insert [my_form] in the page content, or a creating a template tag for inclusion in your themes template files.
But all that really depends on the need of your users and what you intend to accomplish with this plugin. That said, it is definitely a good thing having at least basic understanding on the concepts of WordPress plugins as suggested by Ersel Aker, although a plugin doing what you are asking or might be as simple as:
// Enqueue javascript (placed in plugins.js in js subdir of plugin)
wp_enqueue_script('plugin.js.handle', plugins_url('js/plugin.js', __FILE__), array());
// Add filter to the_content
add_action('the_content', 'my_plugin_content');
// Append form to page content under certain conditions
function my_plugin_content($content) {
$form = '<input type="text" id="value1" name="value1" value="1"/> <input type="text" id="value2" name="value2" value="2"/> <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/> <input type="text" id="answer" name="answer" value=""/>';
if ( some_magic_conditions_are_met() ) {
return $content . $form;
}
return $content;
}