Asked by:
Toggling visibility of a div container

General discussion
-
I am building a HTML5 and JS app for Windows Store.
This is how I have thought about it would work.
User click on new game button <a id="newgameBtn">New Game</a> to start a new game.
I have a set of 6 images and clicking on new game button shows all these 6 images. We ask user to have a look and these images and click on Start button when they are ready. On start, we hide/navigate away all these 6 images and show one random image out of these images. We also ask them a question if they like this image and have a choice to select yes or no. Yes selection has a weight of 1, 2, 4, 8, 16, 32. No selection is always zero weighted. So, once they have gone through all 6 images, and, say, they said yes to 3 images having weight of 2,4,8, then I simply show them there score of 14 (2+4+6).
If I were to achieve all that above in using PHP and jQuery I know how to do that but being new to Windows development I can't my get head around this.
I thought of listing 6 div container having a css class which sets their visibility to none. And then I do a javascript for loop to toggle visibility of these randomly but it didn't work for me. For example to make the divs visible following failed...
<div id="imagescontainer">
<div id="image1" class="dispNone>
<img src="image1.png" alt="" /> Like it? <input type="radio" name="myimages[]" value="1">Yes, <input type="radio" name="myimages[]" value="0">Yes
</div>
<div id="image2" class="dispNone>
<img src="image2.png" alt="" /> Like it? <input type="radio" name="myimages[]" value="2">Yes, <input type="radio" name="myimages[]" value="0">Yes
</div>
</div>
var images_ids = ['image1', 'image2'....'image6'];
app.onactivated = function (args) {
.....................................................
newgameButton.addEventListener("click", newgameClickHandler, false);
}
};
function newgameClickHandler(eventInfo) {
var index;
for (index = 0; index < images_ids.length; ++index) {
var tmp_imgid = images_ids[index];
document.getElementById(tmp_imgid).style.visibility = 'visible';
}
}
I would like to know what's the best way to achieve this and how can I keep track of user selection.
Tuesday, November 18, 2014 9:38 PM
All replies
-
i'm not really good in html, so excuse me if make a horrible mistake; but why not using style.display = 'none' and style.display = 'block'
Microsoft Certified Solutions Developer - Windows Store Apps Using C#
- Edited by Dave SmitsMVP Tuesday, November 18, 2014 9:47 PM
Tuesday, November 18, 2014 9:43 PM -
I actually wanted to to do all this in C# because I want to learn that. But its new for me so I am not aware of the best techniques and tools available. For example, above can be achieved in PHP using Session storage etc and I can radomise and refresh page etc. Let me try what you mentioned above... what about overall approach? any comments on that?Tuesday, November 18, 2014 9:47 PM
-
Yes style.display='block' works well for me. cheers. I will still look for comments on overall what I am trying to achieve. CheersTuesday, November 18, 2014 9:49 PM