I want make mini game but stuck with logic code.
Try see my code below,,,
I want to direct after click all div ID wrong1, wrong2, wrong3, then wrong4 (the last) its value for direct. Something add class maybe.
I want before the last click ID wrong4, The ID wrong4 its addclass rightAnswers. Because class rightAnswers have attribute html5 data-current-game="5" data-next-game="finish" for next result page.
I have try make it and helping by https://stackoverflow.com/users/2025923/tushar
Helping by Tushar, How to show last ID when All ID on DIV click,
But now i want different logic.
Thank you
Note :
I have try edit like this,
But the class rightAnswers not function ...
divs.splice(divs.indexOf($(this).prop("id")), 1)
if (divs.length == 0) {
$('#wrong1, #wrong2, #wrong3, #wrong4').addClass('rightAnswers');
}
And add script url direction like this :
But the class rightAnswers still not function,
I want class rightAnswers is working if i click.
$(".rightAnswers").click(function() {
window.location = "/game/result";
});
Code From How to show last ID when All ID on DIV click
$(function () {
var divs = ["wrong1", "wrong2", "wrong3", "wrong4"];
$('#wrong1, #wrong2, #wrong3, #wrong4').click(function () {
$(this).animate({
opacity: 0,
top: 100,
}, 500);
divs.splice(divs.indexOf($(this).prop("id")),1)
if(divs.length == 0){
$('#wrong-gameOne').eq(0).hide();
$('#correct-gameOne').eq(0).show();
}
});
});
<img id="correct-gameOne" class="rightAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/10/thumbnail.jpg" data-current-game="1" data-next-game="2" style="display:none;" />
<img id="wrong-gameOne" class="wrongAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/125/thumbnail.jpg" data-current-game="1" data-next-game="2" />
<div id="wrong1" class="no-bottom">
<label>TEXT 1</label>
</div>
<div id="wrong2" class="no-bottom">
<label>TEXT 2</label>
</div>
<div id="wrong3" class="no-bottom">
<label>TEXT 3</label>
</div>
<div id="wrong4" class="no-bottom">
<label>TEXT 4</label>
</div>
I don't really get what you're doing, but I think this fixes your code. Here's the jsfiddle:
https://jsfiddle.net/mckinleymedia/2s0wuL0a/
html:
<div id="game1">
<img class="rightAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/10/thumbnail.jpg" data-current-game="1" data-next-game="2" style="display:none;" />
<img class="wrongAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/125/thumbnail.jpg" data-current-game="1" data-next-game="2" />
<div id='1' class="wrong no-bottom">
<label>TEXT 1</label>
</div>
<div id='2' class="wrong no-bottom">
<label>TEXT 2</label>
</div>
<div id='3' class="wrong no-bottom">
<label>TEXT 3</label>
</div>
<div id='4' class="wrong no-bottom">
<label>TEXT 4</label>
</div>
</div>
script:
$(function () {
var divs = ["1", "2", "3", "4"];
$('#game1 .wrong').click(function () {
$(this).animate({
opacity: 0,
top: 100,
}, 500);
divs.splice(divs.indexOf($(this).prop("id")),1)
console.log(divs);
console.log(divs.length);
if(divs.length == 0){
$('#game1 .wrongAnswer').hide();
$('#game1 .rightAnswer').show();
}
});
});
Here's a revised version. And a new jsfiddle:
https://jsfiddle.net/mckinleymedia/1ocnoaaa/2/
html:
<div id="game1">
<img src="https://authentic-scandinavia.com/system/images/tours/photos/10/thumbnail.jpg" data-current-game="1" data-next-game="2" />
<div id="target1"></div>
</div>
script:
$(function () {
function createGame(num) {
var answers = [{
text: "TEXT 1"
}, {
text: "TEXT 2"
}, {
text: "TEXT 3"
}, {
text: "TEXT 4"
}];
var target = $("#target" + num);
answers.forEach(function (answer, k) {
var aid = 'a' + num + '-' + k;
$("<div />")
.addClass("answer no-bottom")
.attr('id', aid)
.html(answer.text)
.appendTo(target);
answer.id = aid;
});
$('#game1 .answer').click(function () {
var $this = $(this);
$this.addClass('wrongAnswer');
var hasMoreAnswers,
thisAnswer = _.find(answers, function(answer) {
return answer.id === $this.attr('id');
});
thisAnswer.tried = true;
hasMoreAnswers = _.find(answers, function(answer) {
return answer.tried !== true;
});
if (!hasMoreAnswers) {
window.open("http://www.w3schools.com");
}
});
}
createGame(1);
});
style:
.wrongAnswer {
opacity:0;
transition:opacity 0.5s linear;
}
Related
Now I have smth like this:
http://jsfiddle.net/54tsowq7/107/
I want to save function if radiobutton selected - div with picture is shown.
But how can I make that when radiobutton text is on hover, the same picture is shown? And when mouseleave - it dissapear?
$(document).ready(function() {
$('input[type="radio"]').change(function() {
$('.text, .img').hide();
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if ($(this).prop('checked')) {
$pic.show();
$text.show();
}else{
$pic.hide();
$text.hide();
}
});
});
<div class="img" id="pic2" style='display:none'><img src="http://images.math.cnrs.fr/IMG/png/section8-image.png" alt=""></div>
<div class="img" id="pic3" style='display:none'><img src="http://www.simpleimageresizer.com/static/images/simple-image-resizer-128x128.png" alt=""></div>
<form class="radiobuttons">
<p class="descr" id="desc1" data-picid="pic2" data-descid="desc1"><input type="radio" name="item1" id="item1" value="1" data-picid="pic2" data-textid="text1">Text 1</p>
<p class="descr" id="desc2" data-picid="pic2" data-descid="desc2"><input type="radio" name="item1" id="item2" value="1" data-picid="pic2" data-textid="text2">Text 2</p>
<p class="descr" id="desc3" data-picid="pic3" data-descid="desc3"><input type="radio" name="item1" id="item3" value="1" data-picid="pic3" data-textid="text3">Text 3</p>
</form>
<div class="text" id="text1" style='display:none'>Lorem Ipsum Text1</div>
<div class="text" id="text2" style='display:none'>Lorem Ipsum Text2</div>
<div class="text" id="text3" style='display:none'>Lorem Ipsum Text3</div>
It's a little bit messy, but if I correctly understand, you want something like this?
$(document).ready(function() {
$('input[type="radio"]').hover(
function() {
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if(!$(this).prop('checked')) {
$pic.show();
$text.show();
}
}, function() {
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if(!$(this).prop('checked')) {
$pic.hide();
$text.hide();;
}
}
);
$('input[type="radio"]').change(function() {
$('.text, .img').hide();
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if ($(this).prop('checked')) {
$pic.show();
$text.show();
}else{
$pic.hide();
$text.hide();
}
});
});
And put your div images to the bottom of your HTML
You can add mouseenter and mouseout events.
But this function will not trigger change event, change event can only trigger when you click on radio button and its attribute or value get changed
$('input[type="radio"]').on('mouseenter',function() {
// do anything on mouse hover
});
$('input[type="radio"]').on('mouseout',function() {
// do anything on mouse leave
});
Try this:
function handlerInFunc(){
$(".myPicOneClass").show();
}
function handlerOutFunc(){
$(".myPicOneClass").hide();
}
$(".myRadioOneClass").hover( handlerInFunc, handlerOutFunc );
Of course, give the proper class selector names you desire for the specific elements.
Below are my requirements.. i tried in below way. it doesnt work for me. Please let me know what is missed out. Thanks
if data-block = 1, add data-rewardpoints = 300
if data-block = 2, add data-rewardpoints = 400
if data-block = 3, add data-rewardpoints = 500
HTML:
<div class="ir_image_holder">
<img class="ir_img_src" src="1.jpg" data-block="1" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="2.jpg" data-block="2" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="3.jpg" data-block="3" data-rewardpoints="" />
</div>
JS:
if ($('.ir_image_holder .ir_img_src').data('block')===1) {
$('.ir_image_holder .ir_img_src').attr('data-rewardpoints', '300');
} else if ($('.ir_image_holder .ir_img_src').data('block')===2) {
$('.ir_image_holder .ir_img_src').attr('data-rewardpoints', '400');
} else if ($('.ir_image_holder .ir_img_src').data('block')===3) {
$('.ir_image_holder .ir_img_src').attr('data-rewardpoints', '500');
}
To achieve this you need to loop over all the .ir_img_src elements individually. Right now your code is setting all the elements data() attributes based on the first element of the set.
You can also tidy the logic by holding all the values to set in an object keyed by the block. Try this:
var data = { 1: 300, 2: 400, 3: 500 }
$('.ir_img_src').each(function() {
$(this).attr('data-rewardpoints', data[$(this).data('block')]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ir_image_holder">
<img class="ir_img_src" src="1.jpg" data-block="1" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="2.jpg" data-block="2" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="3.jpg" data-block="3" data-rewardpoints="" />
</div>
Note that it's considered better practice to use the setter of data() instead of attr(), where possible. I've left your code as-is here, as there are certain cases where you have to use attr() to set the data attribute.
Do some thing like this
// Get all matched element
var elem = $('.ir_image_holder .ir_img_src');
// loop through each o fthem to get the data-block value
$(elem).each(function(e,v){
if($(this).data('block')===1){
// assign the data-reward point here
$(this).attr('data-rewardpoints',300);
}
// rest of code
})
try iterating over all elements
$('.ir_image_holder .ir_img_src').each(function() {
if($( this ).data('block') == "1") {
$( this ).attr('data-rewardpoints', '300');
}
else if($( this ).data('block') == "2") {
$( this ).attr('data-rewardpoints', '400');
}
else if($( this ).data('block') == "3") {
$( this ).attr('data-rewardpoints', '500');
}
});
Your selector selects all elements that match it and not a single one, which is the expectation of the JS snippet you've provided.
I assume you want the image to be clicked and then to perform the operation in your JS snippet. Here's how you can do it:
$('.ir_image_holder .ir_img_src').on('click', function () {
var $el = $(this);
if ($el.data('block')===1) {
$el.attr('data-rewardpoints', '300');
} else if ($el.data('block')===2) {
$el.attr('data-rewardpoints', '400');
} else if ($el.data('block')===3) {
$el.attr('data-rewardpoints', '500');
}
});
If you're just trying to initialize them then iterate over all selected elements.
$('.ir_image_holder .ir_img_src').each(function () {
var $el = $(this);
if ($el.data('block')===1) {
$el.attr('data-rewardpoints', '300');
} else if ($el.data('block')===2) {
$el.attr('data-rewardpoints', '400');
} else if ($el.data('block')===3) {
$el.attr('data-rewardpoints', '500');
}
});
When you just want to compare similar values, why not use switch instead of if
$('.ir_img_src').each(function(e,v){
var me = $(this);
var db = parseInt($(this).attr('data-block'));
switch(db)
{
case 1 : me.attr('data-rewardpoints', '300');
break;
case 2 : me.attr('data-rewardpoints', '400');
break;
case 3 : me.attr('data-rewardpoints', '500');
break;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="ir_image_holder">
<img class="ir_img_src" src="1.jpg" data-block="1" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="2.jpg" data-block="2" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="3.jpg" data-block="3" data-rewardpoints="" />
</div>
I want make mini game but stuck with logic code.
Try see my code below,,,
I want to direct after click all div ID wrong1, wrong2, wrong3, then wrong4 (the last) its value for direct. Something add class maybe.
I want before the last click ID wrong4, The ID wrong4 its addclass rightAnswers. Because class rightAnswers have attribute html5 data-current-game="5" data-next-game="finish" for next result page.
I have try make it and helping by https://stackoverflow.com/users/2025923/tushar
Helping by Tushar, How to show last ID when All ID on DIV click,
But now i want different logic.
Thank you
Note :
I have try edit like this,
But the class rightAnswers not function ...
divs.splice(divs.indexOf($(this).prop("id")), 1)
if (divs.length == 0) {
$('#wrong1, #wrong2, #wrong3, #wrong4').addClass('rightAnswers');
}
And add script url direction like this :
But the class rightAnswers still not function
$(".rightAnswers").click(function() {
window.location = "/game/result";
});
Code From How to show last ID when All ID on DIV click
$(function () {
var divs = ["wrong1", "wrong2", "wrong3", "wrong4"];
$('#wrong1, #wrong2, #wrong3, #wrong4').click(function () {
$(this).animate({
opacity: 0,
top: 100,
}, 500);
divs.splice(divs.indexOf($(this).prop("id")),1)
if(divs.length == 0){
$('#wrong-gameOne').eq(0).hide();
$('#correct-gameOne').eq(0).show();
}
});
});
<img id="correct-gameOne" class="rightAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/10/thumbnail.jpg" data-current-game="1" data-next-game="2" style="display:none;" />
<img id="wrong-gameOne" class="wrongAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/125/thumbnail.jpg" data-current-game="1" data-next-game="2" />
<div id="wrong1" class="no-bottom">
<label>TEXT 1</label>
</div>
<div id="wrong2" class="no-bottom">
<label>TEXT 2</label>
</div>
<div id="wrong3" class="no-bottom">
<label>TEXT 3</label>
</div>
<div id="wrong4" class="no-bottom">
<label>TEXT 4</label>
</div>
I'm attempting to make an element slide off the page to the left and a new element slide into the page from the right when the right arrow key is pressed anywhere on the page (not just in a specific input).
jQuery and jQuery UI are implemented. This is what I have so far:
HTML:
<div class="box" id="wherebox">
<h2>Where</h2>
<br/>
<div id="wherecontent">
<input type="text" class="maininputs" name="where" id="where" autofocus="autofocus"/>
<img src="resources/imgs/right.png" id="wherenext" height="20px" width="50px"/>
</div>
</div>
<div class="box" id="checkinbox">
<h2>Check In Date</h2>
<br />
<div id="checkincontent">
<img src="resources/imgs/left.png" id="checkinprev" height="20px" width="50px"/>
<input type="text" id="checkin" name="checkin" readonly="readonly" class="maininputs"/>
<img src="resources/imgs/right.png" id="checkinnext" height="20px" width="50px"/>
</div>
</div>
JS:
$('*').bind("rightKey", function(e) {
var $box = $(this).closest('.box'), $next = $box.next();
$box.hide('slide', {
direction : "left"
}, 1000);
$next.delay(750).show('slide', {
direction : "right"
}, 1000);
});
$('*').keyup(function(e) {
if (e.keyCode == 39) {
$(this).trigger("rightKey");
}
});
Anyone know what's missing? Currently it will only work if an input is selected.
Try
$('.box').first().show();
$(document).on("rightKey", '.box', function (e) {
var $box = $(this).closest('.box'),
$next = $box.next();
$box.hide('slide', {
direction: "left"
}, 1000);
$next.delay(750).show('slide', {
direction: "right"
}, 1000);
});
$(document).on('keyup', '.box', function (e) {
if (e.keyCode == 39) {
$(this).trigger("rightKey");
}
});
Demo: Fiddle
I can't seem to find out why this won't work.
photoVal always equals nothing. So the background I have never disappears. When I select a file shouldn't the value change?
Jquery
$(document).ready(function() {
$('.browsebutton').bind("click" , function () {
$('#uploadphoto').click();
});
var photoVal = $('#uploadphoto').val();
$('#uploadphoto').change(function(){
alert(photoVal);
});
if (photoVal !== ''){
$('#photo').css('background', 'none');
}
});
HTML
<div id="photo">
<img id="preview" src="#" alt="Image Preview" />
</div>
<br>
<div id="browse">
<button type="button" class="browsebutton">Add Photo</button>
</div>
<input type="file" id="uploadphoto" name="uploadphoto" style="display: none;"/>
This question seems like a duplicate.
Try this :
$(function() {
$("#uploadphoto").change(function (){
var file_name = $(this).val();
});
});