Help Required with Prototype

Vanq

Hello there,

I have to build a simple prototype of my system design which has to demonstrate functionality but doesn't have to have functionality.

I am constructing an authoring system for a e-learning system that needs to be able to be "adaptive" for the user.

For the prototype however I just need some simple menu, drop down boxes and drag and drop options. I have pretty good experience with Java but none with php and need to have a semi working prototype by monday and wondered if anyone could lend a hand.

If anyone can then please reply here or message me and ill give you some more details, but its pretty much just a top menu, a list on the left hand side where u can click on an object within the list and it displays the text in the middle box, then u can drag the object into a list on the far side boxes. With then a drop down box to select different sets of the boxes on the right hand side.

Hope someone can help.

Regards

Vanq

bpat1434

And just how do you expect to code this project if you can't even handle the prototype?

If you want something to show your client(s), I'd say go purchase a program called Axure in which you can drag and drop and design pages with drop-downs and export them to an html format which the user client can inspect and review. There's no style, but you can really get a good "prototype" of what the application will do with that program.

Vanq

Its a university project not a commercial one. the prototype is simply for design purposes, then have till april to code and do the full project which i am hoping is time to learn sufficant php, was just looking for some pointers with the php for creating a simple "show" template rather than a fully coded project.

And I am looking into axure thank you.

bpat1434

Seeing as it's a school project, most people here won't do your homework for you. Dropdowns are basic HTML elements, so learn HTML or xHTML. Drag and drop stuff is Javascript (not Java) and is available through almost all javascript frameworks (jQuery, Prototype & Scriptaculous, Dojo, etc.).

Start there with some basic HTML pages. No coding necessary. Then when you learn PHP, you and deal with it as it comes.

Vanq

Is there a good javascript tool like the Axure one for HTML? As i dont want to spend too long on prototype as its for design and will be building a full prototype at a later date.

Thanks for your help so far seems its going to be easier to mock it up quickly then do the php development later.

bpat1434

Not that I know of. Axure isn't for HTML specifically. Axure is just a program to help do mock-ups of any form which can be in any language, C, C++, Java, HTML, ASP, etc.

Of course, making a form and adding javascript to do drag-drop is literally a 20 minute to one hour to throw it together depending upon styling and your familiarity with whatever framework you use.

Vanq

Excellent thank you, just one final (i hope) question. I am fine with mocking up a form using Axure, and I plan to have 2 sections either side of a main "edit" area.

The set-up being that when an object in left section is selected then it is available in the edit area for text editing and can be saved, then wish to have drag and drop options to a section on the right section (whilst leaving the original object on the left), I know that to do this i simply create the visual option but keep the object the same in the back-end as such but to simulate it with javascript should I be using a HTML table, making the rows draggable, and then the right section droppable? And how do i keep a copy visually in the left section.

That probably sounds a bit convoluted but if you could give me any pointers it would be greatly appreciated.

Regards.

bpat1434

That I'm not sure, you'd haveto play around with it. But my guess would be that as soon as someone clicks on your drag handle then the element they clicked on is cloned and put right under the mouse cursor.

Problem with that is if I start to drag then stop, I'd have 2 elements in the same error overlapping eachother. And if I kept doing that, it could get really messy.

You'd probably be better off using an iconic button to let the user click the edit button, have a modeless window pop-up in the center, let them drag it in there, and when they save it, update the side and close the pop-up. Not as elegant, but prevents confusion.