Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
Like Tree1Likes

Thread: This may be a complicated issue

  1. #1
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times

    This may be a complicated issue

    I'm a total noob to webdesign (total noob - I don't understand most of the jargon). I have a website about Ballroom Dancing I made from a template, which I use Microsoft Expressions Web to manage.

    I can't think of an easy way to explain this, so I'll just get to it. In ballroom dancing, some moves start on the right foot, some on the left; some start forward, and some start backward. Therefore, move A can only be followed by move B,C,D but not X,Y,Z. Likewise, move B can only be followed by move C,X,Z, but not B,D,Y.

    I want to build an interactive webpage that will let people build choreography. They will pick a move to start with, and then it will automatically display the subset of moves that can come next, and so on and so on until they are finished.

    Any direct on how I should go about doing this?

  2.  

  3. #2
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    You might want to think about learning JavaScript for this one. If you cannot wrap your head around a language, hire someone.

    JavaScript is not the only solution, but it is best suited, IMO.

  4. #3
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    Quote Originally Posted by brandMatt View Post
    You might want to think about learning JavaScript for this one. If you cannot wrap your head around a language, hire someone.

    JavaScript is not the only solution, but it is best suited, IMO.
    Okay. Any suggestions on youtube series or something to get me started? I'm sure there are thousands of resources out there.

  5. #4
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    There are an unimaginable amount of learning resources for JavaScript out there. I'd suggest a intro to JavaScript course from Lynda.com, I've heard great things about treehouse too.

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I'm not sure you're going to find something for this specifically. It's too narrowcast of a topic.

    How would I do this personally? I'd have a database to store the steps that can be performed after a particular step, and use AJAX to call them. This isn't going to be an easy task, though.
    brandMatt likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    Thanks. I don't know what AJAX is, but I'll follow your link and look into it. I also see that this forum has a javascript/Ajax section, so I will post any further questions there.

  8. #7
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    I like the idea of storing all the steps in a db, and using Ajax to process them. I figure it's a little on the complicated side, for an absolute beginner.

    On the flip side, he does want to build a choreography based interactive web page. He has to expect things to get complicated.

    Please post back with an update, I'm curious to see the outcome.

  9. #8
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    Will do, although it may be a long time before that update comes. Gotta go learn how to ajax!

  10. #9
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    I'm working on the skeleton of the page right now, and running into an issue. I have a list on the left and a list on the right, and eventually I want to be able to click a button and move an item from one the the other. I have made two attempts at this, and I can't get it to work.


    Code:
    <header>
    <h2>Attempt #1</h2>
    </header>
    <table>
    <tr>
    <td style="width:40%"><strong>Syllabus</strong>
    <td style="width:20%"></td>
    <td style="width:40%"><strong>Your Routine</strong></td>
    </tr>
    <tr>
    <td></td>
    <td>
    <a href="#" class="button button-icon">&gt;&gt;</a><br/>
    <a href="#" class="button button-icon">&lt;&lt;</a>
    </td>
    <td></td>
    </tr>
    <tr>
    <td>
    <select name="Syllabus Figure" size="10" style="width:100%">
    <option value="PreBronze">Closed Basic Movement</option>
    <option value="PreBronze">1-5 Closed Basic Movement</option>
    <option value="PreBronze">6-10 Closed Basic Movement</option>
    <option value="PreBronze">1-2 Closed Basic</option>
    <option value="PreBronze">1-7 Closed Basic</option>
    <option value="Silver">Closed Basic Development</option>
    <option value="PreBronze">LF Basic Movement in Place</option>
    <option value="PreBronze">RF Basic Movement in Place</option>
    <option value="PreBronze">Open Basic Movement</option>
    <option value="PreBronze">1-5 Open Basic Movement</option>
    <option value="PreBronze">6-10 Open Basic Movement</option>
    <option value="PreBronze">1-5 Open Basic Movement</option>
    <option value="PreBronze">6-10 Open Basic Movement</option>
    <option value="PreBronze">1-2 Open Basic</option>
    <option value="PreBronze">1-7 Open Basic</option>
    </select>
    </td>
    <td></td>
    <td>
    <select name="Syllabus Figure" size="10" style="width:100%">
    <option id="none" value="default"> -empty- </option>
    </select>
    </td>
    </tr>
    <tr>
    <td><br/></td>
    <td><br/></td>
    <td><br/></td>
    </tr>
    <tr>
    <td>
    <form action="">
    <input type="checkbox" name="Level" value="PreBronze" checked> <strong>PreBronze</strong><br/>
    <input type="checkbox" name="Level" value="Bronze" checked> <strong>Bronze</strong><br/>
    <input type="checkbox" name="Level" value="Silver" checked> <strong>Silver</strong><br/>
    <input type="checkbox" name="Level" value="Gold" checked> <strong>Gold</strong><br/>
    <input type="checkbox" name="Corner" value="Corner"> <strong>At Corner</strong><br/>
    </form>
    </td>
    <td colspan="2">
    <form action="">
    <br/>
    <input type="text" name="CustomFigure" placeholder="Add a Custom Figure"style="width:100%"><br/>
    <br/>
    <a href="#" class="button button-icon">Add Custom Figure</a>
    </form>
    </td>
    </tr>
    </table>
    <br/>
    <h2>Attempt #2</h2>
    <form>
    <fieldset>
    <select name="Syllabus Figure" size="10">
    <option value="PreBronze">Closed Basic Movement</option>
    <option value="PreBronze">1-5 Closed Basic Movement</option>
    <option value="PreBronze">6-10 Closed Basic Movement</option>
    <option value="PreBronze">1-2 Closed Basic</option>
    <option value="PreBronze">1-7 Closed Basic</option>
    <option value="Silver">Closed Basic Development</option>
    <option value="PreBronze">LF Basic Movement in Place</option>
    <option value="PreBronze">RF Basic Movement in Place</option>
    <option value="PreBronze">Open Basic Movement</option>
    <option value="PreBronze">1-5 Open Basic Movement</option>
    <option value="PreBronze">6-10 Open Basic Movement</option>
    <option value="PreBronze">1-5 Open Basic Movement</option>
    <option value="PreBronze">6-10 Open Basic Movement</option>
    <option value="PreBronze">1-2 Open Basic</option>
    <option value="PreBronze">1-7 Open Basic</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

    <select name="Syllabus Figure" size="10">
    <option id="none" value="default"> -empty- </option>
    </select>
    </fieldset>
    </form>
    Last edited by teapot; Aug 09th, 2016 at 09:03 PM.

  11. #10
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    I'll take a look at your code tomorrow, when I'm at my computer. Just an idea though, why not add a drag and drop feature to your site. It's very easy to implement. Instead of clicking a button to move from one list to the other, just drag it over.

    You don't need to post your code & a link, it's kinda redundant and makes for a really long thread. Just a link would suffice.
    The second tr is kinda useless, just throw the middle td from the second tr into the third tr. Something like this. This is attempt #1 btw.
    Code:
    <table>
        <tr>
            <td style="width:40%"><strong>Syllabus</strong>
                <td style="width:20%"></td>
                <td style="width:40%"><strong>Your Routine</strong>
                </td>
        </tr>
        <tr>
            <td>
                <select name="Syllabus Figure" size="10" style="width:100%">
                    <option value="PreBronze">Closed Basic Movement</option>
                    <option value="PreBronze">1-5 Closed Basic Movement</option>
                    <option value="PreBronze">6-10 Closed Basic Movement</option>
                    <option value="PreBronze">1-2 Closed Basic</option>
                    <option value="PreBronze">1-7 Closed Basic</option>
                    <option value="Silver">Closed Basic Development</option>
                    <option value="PreBronze">LF Basic Movement in Place</option>
                    <option value="PreBronze">RF Basic Movement in Place</option>
                    <option value="PreBronze">Open Basic Movement</option>
                    <option value="PreBronze">1-5 Open Basic Movement</option>
                    <option value="PreBronze">6-10 Open Basic Movement</option>
                    <option value="PreBronze">1-5 Open Basic Movement</option>
                    <option value="PreBronze">6-10 Open Basic Movement</option>
                    <option value="PreBronze">1-2 Open Basic</option>
                    <option value="PreBronze">1-7 Open Basic</option>
                </select>
            </td>
            <td>
                <a href="#" class="button button-icon">&gt;&gt;</a>
                <br/>
                <a href="#" class="button button-icon">&lt;&lt;</a>
            </td>
            <td>
                <select name="Syllabus Figure" size="10" style="width:100%">
                    <option id="none" value="default"> -empty- </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <br/>
            </td>
            <td>
                <br/>
            </td>
            <td>
                <br/>
            </td>
        </tr>
        <tr>
            <td>
                <form action="">
                    <input type="checkbox" name="Level" value="PreBronze" checked> <strong>PreBronze</strong>
                    <br/>
                    <input type="checkbox" name="Level" value="Bronze" checked> <strong>Bronze</strong>
                    <br/>
                    <input type="checkbox" name="Level" value="Silver" checked> <strong>Silver</strong>
                    <br/>
                    <input type="checkbox" name="Level" value="Gold" checked> <strong>Gold</strong>
                    <br/>
                    <input type="checkbox" name="Corner" value="Corner"> <strong>At Corner</strong>
                    <br/>
                </form>
            </td>
            <td colspan="2">
                <form action="">
                    <br/>
                    <input type="text" name="CustomFigure" placeholder="Add a Custom Figure" style="width:100%">
                    <br/>
                    <br/>
                    <a href="#" class="button button-icon">Add Custom Figure</a>
                </form>
            </td>
        </tr>
    </table>
    Last edited by brandMatt; Dec 02nd, 2015 at 09:06 PM. Reason: Added code.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com