Design math problem search result page

  • Tình trạng: Closed
  • Giải thưởng: $150
  • Các bài thi đã nhận: 16
  • Người chiến thắng: nextdesign2007

Tóm tắt cuộc thi

Design one web page that contains math problem search results.

The page should contain the following sections:

1. Website header
2. Search terms + sorting
3. Filters
4. Found math problems
5. My Problem Set
6. Website footer

The web design should follow general design guide of [login to view URL] website. Please use the same elements as there where appropriate.

The result should be provided as two PNG files: one for desktop PC, one for a smartphone.

I have attached a mockup that can be used to better understand which content should be in each sections. Please do NOT use it as a visual style guide. It is just for data/information.

Everywhere where I write buttons they could be either buttons or links on your choice.

Here is description of section content:


1. Website header
A website header with the same links as at [login to view URL]
Please improve the header to take less vertical space.

2. Search terms + sorting
This panel on the top of the screen contains an edit field with the search phrase that was being searched and "Search" button. User can redefine search term and press the Search button again. There should be some element on the right allowing users to change sorting.

3. Filters

A left panel with search filters. There could be the following filtering options:

* "Find text in" - two checkboxes, "Problem" and "Solution"
* "Age" - a slider from 7y.o. to 16y.o.
* "Difficulty" - a slider from 1 star to 5 star difficulty
* "Categories" - a list of selected categories with checkboxes to uncheck the categories and "Select categories" button on the bottom that will open a popup window to choose categories from the list

Each filter should be easy to reset.

4. Found math problems

The main part of the webpage with search results as a list of found math problems.

The search result should contain 20 math problems per page.

Each math problem block should contain the following information:
* List of categories, each category is clickable
* Difficulties as stars (1 star minimum, 5 stars maximum)
* Age rating, like 10+
* Full problem text
* Button to show answers in a popup window - "Show Answer"
* Button to add this problem to the My Problem Set - "Add to My Problems"

Each math problem section must be clickable, leading to the corresponding math problem webpage.

There should also be standard pagination controls on the bottom of this section, allowing the user to go to the next page of the search results (this section is missed on the attached image file). Like:
Previous Page 1 2 3 ... 20 Next Page

5. My Problem Set

A section on the right with list of selected math problems. It is like a shopping cart on shopping websites.

This section contains:
* "My problem set" title on the top
* List of problems
* "Print" button on the bottom
* "Clear All" button on the bottom

Each problems in this section has short text which is just the first X characters of the problem, remove button and a "burger" section on the left that can be used to sort the problems.

6. Website footer

The same footer as on the [login to view URL] website.

=============

Here is the list of problems to use in the design:
[login to view URL]

Các kĩ năng yêu cầu

Phản hồi của người thuê

“Second time this designer provides the best (by far) design in our contest. Highly recommend him!”

Hình ảnh hồ sơ vassiliphilippov, United Kingdom.

Bảng thông báo công khai

  • nextdesign2007
    nextdesign2007
    • cách đây 11 tháng

    Please check it Entry #22 .

    • cách đây 11 tháng
  • nextdesign2007
    nextdesign2007
    • cách đây 11 tháng

    Please check it Entry #21 .

    • cách đây 11 tháng
  • nextdesign2007
    nextdesign2007
    • cách đây 11 tháng

    Please check it Entry #15 .

    • cách đây 11 tháng
  • vassiliphilippov
    Chủ cuộc thi
    • cách đây 11 tháng

    To everyone: please DO NOT follow design in my draft, just consider it as layout. For example ALL versions submitted are with boxes. I want to see a version where search results are not in boxes, like on Google.

    • cách đây 11 tháng
  • pixelwebplanet
    pixelwebplanet
    • cách đây 11 tháng

    Check entry : #14

    • cách đây 11 tháng
  • SamySalman
    SamySalman
    • cách đây 11 tháng

    #extended #increaseprize and don't #Seal :)

    • cách đây 11 tháng
  • nextdesign2007
    nextdesign2007
    • cách đây 11 tháng

    Please check it Entry #11 .

    • cách đây 11 tháng
  • vassiliphilippov
    Chủ cuộc thi
    • cách đây 11 tháng

    For everyone: please do not consider the attached picture as a guide for design style. Just general information layout. Please follow the website style guide instead.

    • cách đây 11 tháng
    1. AquimaWeb
      AquimaWeb
      • cách đây 11 tháng

      Can i use the same layout?

      • cách đây 11 tháng
  • navuthakur
    navuthakur
    • cách đây 11 tháng

    Please #sealed the contest so that no one can cheat

    • cách đây 11 tháng
    1. vassiliphilippov
      Chủ cuộc thi
      • cách đây 11 tháng

      Done

      • cách đây 11 tháng
  • navuthakur
    navuthakur
    • cách đây 11 tháng

    Please #sealed #sealed #sealed #sealed #sealed the contest. I am working on the design

    • cách đây 11 tháng
    1. vassiliphilippov
      Chủ cuộc thi
      • cách đây 11 tháng

      Done

      • cách đây 11 tháng
  • vspassion7
    vspassion7
    • cách đây 11 tháng

    #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed #sealed

    • cách đây 11 tháng
    1. vassiliphilippov
      Chủ cuộc thi
      • cách đây 11 tháng

      Done

      • cách đây 11 tháng
  • AquimaWeb
    AquimaWeb
    • cách đây 11 tháng

    Wait for my entry please, thank you.

    • cách đây 11 tháng

Xem thêm bình luận

Làm thế nào để bắt đầu với cuộc thi

  • Đăng cuộc thi của bạn

    Đăng cuộc thi của bạn Nhanh chóng và dễ dàng

  • Nhận được vô số bài dự thi

    Nhận được vô số Bài dự thi Từ khắp nơi trên thế giới

  • Trao giải cho bài thi xuất sắc nhất

    Trao giải cho bài thi xuất sắc nhất Download File - Đơn giản!

Đăng cuộc thi ngay hoặc tham gia với chúng tôi ngay hôm nay!