Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other 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
I am creating an practice exam for some students in my school. I have a lot of multiple choice questions and i'm trying to get it to work bud got stuck here. I am new to javascript and have no clue on how to get this working. So every question has 4 choices that look like this:
<tr>
<td>
<figures1></figures1>
</td>
<td class="questiona">
<br>
<input type="radio" name="q1" value="a"/>a<br>
<input type="radio" name="q1" value="b"/>b<br>
<input type="radio" name="q1" value="c"/>c<br>
<input type="radio" name="q1" value="d"/>d<br>
</td>
</tr>
The question is just an image and they have to select either a, b, c or d.
I've managed to get it working this far, bud what i want to add is an dialog whenever they click on a, b, c or d to tell them if the answer is correct or not and if not add a feedback to tell them why the answer is wrong. The reason why i am not using alert to give them a feedback is because i can't add images to an alert box.
Thanks in advance
Give your input a class like "answer".
Then in your jquery code:
$(document).ready(function(){
$(".answer").click(function(){
ValidateAnswerFunction(this); //sends the input element to the validate answer function
$( "#dialog" ).css("display", "block"); // shows the dialog .hide(); to hide it!
});
$("#dialog").click(function(){
$(this).hide();
});
});
function ValidateAnswerFunction(input){
switch($(input).val()){
case "a":
$("#dialog").html("correct");
break;
case "b":
$("#dialog").html("close");
break;
case "c":
$("#dialog").html("not even close <img src='http://www.w3schools.com/html/pic_mountain.jpg' style='width:100px;height:100px'>");
break;
case "d":
$("#dialog").html("are you even trying m8?");
break;
}
}
Where #dialog is your dialog:
<div id="dialog"></div>
JS fiddle
You'd need to test the value of the clicked element and then give feedback from that answer. This can be done i varity of ways, but I'd say that using $("[name=q1]").click() would be the easiest, and then use $(this).val() to check the answer.
Please refer to this fiddle for an example.
http://jsfiddle.net/u3csoave/
you can use confirmation alert to achieve this.there are too many jquery demo's available.
for example see this link:how to show confirmation alert with three buttons 'Yes' 'No' and 'Cancel' as it shows in MS Word
i think you can use confirmation alert to show user correct answer and put a link in the alert box which allows them to change their answer.
JQueryUI dialog..
function foobar() {
$("#dialog").dialog();
}
<div id="dialog" title="Dialog title">
<img src="foo.bar"/>
</div>
Then open dialogs in radiobuttons' onlick method.
Maybe you should just make one generic dialog and pass all the information needed as parameters so you don't end up with a page containing multiple dialogs.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to create a button that changes color when username and password fields have both been entered with some sort of input (IE; neither username or password text boxes are empty)
Is there a way I can get a function to trigger when input of a text box is changed in NativeScript? I've asked at the NativeScript slack, among other sites but I don't seem to get a reply ever.
I thought this was a relatively simple request, especially when I'm using vanilla JS. Surely it must be simpler than using a framework such as Angular or Vue?
I do not want to use a framework, I am looking for a way to do this with plain JS. What have I tried? I've tried onChange="", textChange="", change="" but none seem to work.
If you are using plain JavaScript / TypeScript without any framework, then you must add your textChange listener after loaded event.
XML
<TextField loaded="onTextFieldLoaded"></TextField>
JS
function onTextFieldLoaded(args) {
const textField = args.object;
textField.off("loaded");
textField.on("textChange", onTextChange);
}
function onTextChange(args) {
console.log("Changed: " + args.value);
}
Here is a Playground Sample.
You can use onkeyup event to trigger the validation for the form.
See the Snippet below:
document.addEventListener("load", function(){
});
function validate(event){
if(document.getElementById("username").value.trim()!="" && document.getElementById("password").value.trim()!=""){
document.getElementById("btn").removeAttribute("disabled");
}else{
document.getElementById("btn").setAttribute("disabled", "disabled");
}
}
.enable{
}
<div>
<label for="username"><input type="text" id="username" name="username" onkeyup="validate(event)"/></label>
<label for="password"><input type="password" id="password" name="password" onkeyup="validate(event)"/></label>
<button id="btn" value="Submit" disabled>Submit</button>
</div>
Edited my whole answer because I initially gave you a whole demo in Javascript lol. Maybe someone with a lot of reputation points should make a Nativescript tag.
Anyway, have you tried it like this?
<TextField hint="Enter text" text="" (textChange)="myFunction($event)"></TextField>
OR
var el = page.getViewById("myEl");
el.on("textChange", myFunction);
function myFunction() {
console.log('woo');
}
And here's some relevant-looking documentation: https://docs.nativescript.org/angular/ui/ng-ui-widgets/text-field#text-field-binding
For a site that I'm working on we are wanting to take a specific design pattern that we've seen work well on other sites and replicate it.
Sample
The behaviour that we are after (in pseduo code)
Question 1
{
if yes go to Question2v1
if no go to question2v2
}
Question 2 version 1
{
if yes go to Question3
if no go to Message with try again button that loops to start
}
Question 2 version 2
{
yes message6
no message 7
}
Question 3
{
if yes go to Question4v1
if no go to question4v2
}
Question 4 version 1
{
if yes message2 with try again button
if no message3 with try again
}
Question 4 version 2
{
if yes message 4
if no message 5
}
But with each acting as the Question text simply getting replaced with a short animation as it does so, apart from in the case of message where the text and the responses change.
The content is static, so doesn't need to be obfuscated or anything, as the questions exist as a quick way for the client to self-assess which option fits. All answers are boolean, but have logic hooks depending on which answer.
I've seen some Dynamic Quizzes before, which run from either pure javascript or a jquery plugin (slickquiz) but I wasn't sure on whether they can easily do this behaviour?
Below is a non-functional mock-up. This is two restyled radio buttons split with col-xs-6 class
Message:
code for the style if you'd like:
<div class="well-inverse well-lg" >
<div class="text-center">
<h3>To help you decide which method applies to your company – answer the questions below</h3>
<hr>
<p>Question 1: Was the Company dissolved more than 6 years ago?</p>
<small style="font-variant:small-caps;">Placeholder: Real Content to come later </small>
</div>
<div class="col-sm-6">
<div class="funkyradio">
<div class="funkyradio-success">
<input type="radio" name="radio" id="radioY">
<label for="radioY">Yes</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="funkyradio">
<div class="funkyradio-danger">
<input type="radio" name="radio" id="radioN">
<label for="radioN">No</label>
</div>
</div>
</div>
</div>
I think I've solved this on own actually.
Simply a set of logic loops which detects the ID of the Yes No elements.
And upon the selection of a button, changes the ID of the button based upon response.
so it would be like
clicked yes first time
change question based on response
change id of yes/no to match this question
e.g from id="q1Yes" to "q2No"
continue loop until user hits an end of chain.
upon end of chain, restart loop if user presses "try again" button
I think my problem was that I wasn't breaking down the problem into small enough parts.
So I've created a quiz using:
php (to store the answers in MySQL DB)
html (to create radio/checkboxes and give them names, values and IDs)
JavaScript/JQuery (to reveal the following question after the current is answered/hide and uncheck the following question if a previous one has been answered differently.
My issue however, is without realising how many different functions it would take to create this I've ended up with hundreds of lines of JavaScript/JQuery to function a 50 question quiz.
Here is a little snippet of my code to see what I'm talking about:
Quiz JavaScript
<script>
$(document).ready(function() {
var par = $('#A2');
$(par).hide();
$('#A1Y').click(function(e) {
$(par).slideDown('slow');
});
$('#A1N').click(function(e) {
$(par).slideDown('slow');
});
});
</script>
Quiz HTML
<div id="A1">
<h5>A1</h5>
<label>
<input type="radio" name="A1" value="Yes" id="A1Y"/>
Yes
</label>
<br>
<label>
<input type="radio" name="A1" value="No" id="A1N"/>
No
</label>
</div>
The above html/JavaScript combination I have repeated for every question, however later on in the quiz some of the functions change so that if Question B1 is answered No, it will reveal question C1, but if B1 is answered Yes, it will reveal B2.
Basically, if someone were to complete all of the B section (1 to 8 - assuming they answered Yes on question B1) but then at the end changed their mind and clicked No for question B1, B2 to 8 would be unchecked, and Question C2 is then revealed. Here is the JQuery for that:
JQuery
$('#B1N').click(function(){
$('#B2').hide('slow')
.find('input:radio').each(function(){ this.checked = false; });
});
$('#B1N').click(function(){
$('#B3').hide('slow')
.find('input:radio').each(function(){ this.checked = false; });
});
And I have the above JQuery all the way up to #B8 - and then this code repeats itself for similar structured sections C, D, E, F & G.
As you can see, this is not a convenient way of coding and it just got out of hand, when more questions kept getting added to the quiz and I started wondering if there was a way to create a loop like function to contain all this information.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a input field like this
<input type="number" id="return_pro" name="available" placeholder="10 Available">
Here if user enter a value more than 10 (That is available), it should not accept and should show an error. How can I do that? I need to use this with the input tag itself. Because text fields comes inside an foreach loop. So number of text fields may increase.
HTML:
<input type="number" id="return_pro" name="available" placeholder="10 Available" onblur="check(this)">
Javascript:
<script>
function check(obj){
var val=obj.placeholder.split(" ")[0];
if(obj.value > parseInt(val)){
alert('invalid');
obj.value="";
obj.focus();
}
}
</script>
The placeholder is just what it says it is, a place holder and has no validation associated.
what you are looking for is some kind of validation, either by javascript/jquery or server side with PHP.
I suggest using a tutorial to learn how validation works like this one here as learning will be infinitely more valuable for the future, than simply copy and pasting some code that people provide on stack overflow.
<input type="number" id="return_pro" name="available" placeholder="10 Available">
<input type="button" value="ok" id="submit"/>
$(function(){
var placeholder=$("#return_pro").attr("placeholder");
var available=parseInt(placeholder.replace(" available",""));
$('#submit').click(function(){
var val=$("#return_pro").val();
if(val>available)
alert("Sorry");
});
});
I think This is actually you looking for.
DEMO HERE
with jQuery
$("#return_pro").keypress(function(){
var intValue = parseInt($(this).val());
if(intValue > 10) {
//value more more then 10, do something
}
});
$('#return_pro').keyup(function(){
var max = $(this).attr('placeholder').match(/[0-9]+/);
if(parseInt($(this).val())>parseInt(max)){
alert('Only '+max+' available');
}
});
DEMO: http://jsfiddle.net/uQH64/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I have this HTML
<input type="text" id="one" />
<input type="text" id="two" />
<button type="button" id="onebtn" >hide</button>
and js as
$('#onebtn').on('click',function(){
$('#one').fadeOut('slow',function(){
$('#two').fadeIn('slow');
});
});
but this doesn't seem to work but, if I use <input type="button" /> it works, but I want to use <button ></button>
fiddle http://jsfiddle.net/Fzg7b/
It is because, you are not loading jQuery in your fiddle.
Load the jQuery version from the top left side. Then it would work!
http://jsfiddle.net/afzaal_ahmad_zeeshan/Fzg7b/5/
Try it here! It is working.
And for information as C Fairweather has mentioned to use
$(function(){
/* A shortcut for dom ready */
});
No jQuery code would work if there is no DOM ready function what we see as
$(document).ready(fucntion () {
/* functions here.. */
})
But jsfiddle doesn't need this! So it is not required! But a good point to come up with. :)
did you try to use .click()?
$('#onebtn').click(function(){
$('#one').fadeOut('slow',function(){
$('#two').fadeIn('slow');
});
});
It may help, but I had no time to test this.
also, you are displaying both the textbox1 and textbox2 elements. Then saying fade the first out and fade the second in but the second textbox is already visible. You cannot fade in an already visible item. Set the second textbox to hidden.
<input type="text" id="two" style="display: none;" />
Once this is done, your code functions as expected. Also, in your jsfiddle...remember to select the jquery version you are using. Currently you load nothing.