На js можно путём добавления класса к родительскому элементу при focusIn и его удалению при focusOut
Далее в css прописываешь, отображение в обёртке добавленного класса.
1) 2 Синих прямоугольника
2) Синий прямоугольник и :before синий прямоугольник
3) Таблица с всеми синими ячейками и 4 белыми
4) Нарисовать фигуру в фотошопе и поставить на background
и ещё 10-20 способов.
Цветной задний фон 2 варианта:
1. Картинка круг с секторами
2. Нарисовать на css 31 квадрат повернуть их через rotate в абсолютном позиционировании. Поместить эти квадраты внутрь блока с заданными width и height и с overflow: hidden. Добавить блоку обёртки border-radius: 50% и всё.
Все числа абсолютным позиционированием, не забыть про z-index.
Собственно макет тут не важен и совершенно не нужны ни flash не html5 достаточно будет javascript ну или jquery. Стоит отметить что зада адаптировать под все экраны с использование flash вообще не возможна т.к. мобильные устройства его не поддерживают.