locked
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#


    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. Cheers
    Tuesday, November 18, 2014 9:49 PM