But first I extended the main view with a semantic zoom. Here is the normal view:

And with semantic zoom (zoomed out):

If there should be many lessons to display the user can get a better overview this way.

But now the more interesting part: the words card game that looks similar to the game Memory® by Ravensburger:

It displays covered playing cards in the first place. After the user touches/clicks on a card it is uncovered and a word in one of the two languages of the current lesson is displayed. The user then needs to find the translated word for it.

If there are too many words in one lesson to show, the words are picked random automatically.

Here is how that looks like now:

OK, that was the last post in the Ultimate Coder Challenge from me.

Of course, there is still enough things left that could be added to this vocabulary trainer – especially the online sychronization should be available soon -, but there is not more time left in this challenge.

As a summary you can say that it is possible to convert a HTML5 app to the new Windows 8 UI design in six weeks, but it is really much work. Although Microsoft says that with HTML5 you just develop once and deploy it to different platforms that’s more like wishful thinking. In practice you have to do a lot of extra work to get the right look and feel for each platform – especially for Windows 8.

Anyway, I hope you enjoyed reading my posts!

There I showed my vocabulary trainer at a booth of Intel at the technical showcase area.

But I also had time to implement some Interface improvements for the vocabulary trainer.

First of all I optimized this dictionary view:

There is no need to show the flags for every single word. It just wastes space. Here is how it looks now:

Now the flags are only showed once anymore at the top right of the screen.

Additionally I needed to find a good way to make it possible for the user to delete Folders again. Deleting lessons is done by selecting them first and then hitting the delete button in the command bar. But that’s not possible for folders as there is no way to select them.

Therefore I decided to use a kind of popup menu for this: when touching/clicking on a folder name a button should appear to enable the user to delete this folder.

After doing some research on that I figured out that this should be possible by using flyouts. So I added this peace of code to the HTML file:

<div id="deleteFolderFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Delete folder flyout}">
    <button id="deleteFolder">Delete this folder with all lessons?</button>
</div>

To finally show the flyout about touching/clicking the folder name I needed to call a JavaScript function in the OnClick event. But obviously it is only possible to call the JavaScript function if this is exposed with a WinJS namespace:

GroupedItems.ShowDeleteFolderFlyout(event)

And here is the JavaScript function itself including the namespace definition:

function showDeleteFolderFlyout(e) {
    var deleteFolderFlyout = document.getElementById("deleteFolderFlyout");
    deleteFolderFlyout.deleteFolderId = e.target.groupKey;
    deleteFolderFlyout.winControl.show(e.target, "right");
}

WinJS.Namespace.define('GroupedItems', {
    ShowDeleteFolderFlyout: showDeleteFolderFlyout
});

That’s how it looks like now after touching/clicking on a folder name:

This was the update for the current week again.

Read on next Monday!

It’s great to be invited again by Intel as last year.

This year I was invited as participant of the Ultimate Coder Challenge, but also as being an Intel Black Belt developer.

San Francisco is a great city and it was a pleasure to meet all the fellow Ultimate Coders and the other Black Belt developers. I knew many of them already from last year.

Have you been to the IDF 2012, too?

It was a pleasure for me to discuss together with other Intel Black Belts like Chris Skaggs (Soma Games), Lee Bamber and Rick Vanner (The Game Creators) and Suresh Kumar (Blue Innovations) as well as Bob Duffy (Intel AppUp Community Manager and moderator of this panel discussion) the pros and cons, but also the challenges of developing apps for multiple devices and platforms.

Have you been to the IDF 2011, too?

That’s really great as one of many benefits resulting from this award is that I’ll be invited to come to the Intel Developer Forum (IDF) in San Francisco this year.

Do you also participate in the Intel AppUp Developer program?