Criar questão de código

.gitignore

@@ -9,4 +9,5 @@ bower_components
 dist
 elm-stuff
 public/bower_components
-src/scss/.sass-cache/
+src/scss/.sass-cache/
+**.DS_STORE

src/Codeschool/Model.elm

@@ -81,8 +81,9 @@ type Route
     | Progress
     | Learn
     | Help
-    | QuestionList
-    | Question Id
+    | QuestionRoot
+    | QuestionList Slug
+    | Question Slug Slug
     | Social
     | Profile
     | Logout

src/Codeschool/Routing.elm

@@ -16,8 +16,9 @@ matchers =
         , map Progress (s "progress")
         , map Learn (s "learn")
         , map Help (s "help")
-        , map Question (s "questions" </> int)
-        , map QuestionList (s "questions")
+        , map QuestionRoot (s "questions")
+        , map QuestionList (s "questions" </> string)
+        , map Question (s "questions" </> string </> string)
         , map Social (s "social")
         , map Profile (s "profile")
         , map Logout (s "logout")
@@ -68,12 +69,15 @@ baseReverse route =
         Help ->
             "help/"
 
-        Question id ->
-            "questions/" ++ toString id
-
-        QuestionList ->
+        QuestionRoot ->
             "questions/"
 
+        QuestionList st ->
+            "questions/" ++ st
+
+        Question a b ->
+            "code/" ++ a ++ "/" ++ b
+
         Social ->
             "social"
 

src/Codeschool/View.elm

@@ -12,7 +12,9 @@ import Page.Learn
 import Page.NotFound
 import Page.Profile
 import Page.Progress
-import Page.Questions.Base
+import Page.Questions.QuestionRoot
+import Page.Questions.QuestionList
+import Page.Questions.Code
 import Page.ScoreBoard
 import Page.Social
 import Page.Submission
@@ -49,11 +51,14 @@ getRouteView model =
         Progress ->
             Page.Progress.view model
 
-        QuestionList ->
-            Page.Questions.Base.viewList Page.Questions.Base.clsList
+        QuestionList string ->
+            Page.Questions.QuestionList.viewList Page.Questions.QuestionList.clsList
 
-        Question id ->
-            Page.Questions.Base.viewDetail model
+        Question string slug ->
+            Page.Questions.Code.view model
+
+        QuestionRoot ->
+            Page.Questions.QuestionRoot.viewList Page.Questions.QuestionRoot.clsList
 
         ScoreBoard ->
             Page.ScoreBoard.view model

src/Page/Actions.elm

@@ -22,7 +22,7 @@ view model =
          div [ attribute "slot" "dropdown-content", class "page-header__user-menu-content" ]
         [ h1 [class "mobile-button__fonts-title"] [ text "Actions" ]
         , span [ onClick (ChangeRoute (ClassroomList)), class "mobile-button__item" ] [ h1 [class "mobile-button__fonts"] [text "Classrooms"] ]
-        , span [ onClick (ChangeRoute (QuestionList)), class "mobile-button__item" ] [ h1 [class "mobile-button__fonts"] [text "Questions"] ]
+        , span [ onClick (ChangeRoute (QuestionRoot)), class "mobile-button__item" ] [ h1 [class "mobile-button__fonts"] [text "Questions"] ]
         , span [ onClick (ChangeRoute (Social)), class "mobile-button__item" ] [ h1 [class "mobile-button__fonts"] [text "Social"] ]
         , span [ onClick (ChangeRoute (Profile)), class "mobile-button__item" ] [ h1 [class "mobile-button__fonts"] [text "Profile"] ]
         , checkLogin model

src/Page/Questions/Code.elm

@@ -0,0 +1,44 @@
+module Page.Questions.Code exposing (view)
+
+-- import Codeschool.Msg exposing (..)
+-- import Data.User exposing (User)
+
+import Codeschool.Model exposing (Model)
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Ui.Generic exposing (container, icon)
+import Ui.Parts exposing (promoSimple, promoTable, simpleHero)
+
+
+-- import Html.Attributes exposing (..)
+-- import Html.Events exposing (..)
+
+
+
+view : Model -> Html msg
+view m =
+    div []
+        [ simpleHero "Titulo da questão" "" "simple-hero__page-blue"
+        , div [ class "question-description" ]
+            [ text
+              """
+              Codifique um software receba o ano de nascimento de uma pessoa e o ano atual. Calcule e mostre:
+              a) A idade dessa pessoa.
+              b) Quantos anos essa pessoa terá  em 2018.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+              aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+              aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaa
+              """
+            ]
+          , select [ class "select-language"  ]
+              [ option [ value "", disabled True, selected True, class "disabled-item" ] [ text "Select language" ]
+              , option [ value "C" ] [ text "C" ]
+              , option [ value "Python" ] [ text "Python" ]
+              , option [ value "Java" ] [ text "Java" ]
+              , option [ value "Java" ] [ text "Java" ]
+              , option [ value "Java" ] [ text "Java" ]
+              ]
+          , div [ class "item-question" ]
+              [ textarea [ class "item-question", maxlength 1000, placeholder "Insert your code" ] []
+              ]
+          , button [ class "send-button" ] [ text "Send to evaluation" ]
+        ]

src/Page/Questions/QuestionList.elm

@@ -0,0 +1,92 @@
+module Page.Questions.QuestionList exposing (clsList, viewList)
+
+import Data.Question exposing (..)
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Ui.Generic exposing (container, date, emoticon)
+import Ui.Parts exposing (promoSimple, promoTable, simpleHero)
+
+questions_type = "Basic questions"
+questions_type_description = "Easy Easy Maaann, mostly basic questions"
+
+viewList : List QuestionInfo -> Html msg
+viewList m =
+    let
+        -- testing if there are no questions
+        --  m = []
+        empty =
+            [ emoticon ":-("
+            , p [ class "center-text" ]
+                [ text "Sorry, there are no questions for you."
+                , br [] []
+                , text "Please wait for more questions or send a message to you teacher to check if everything is ok."
+                ]
+            ]
+
+        listing =
+            [ div [ class "question-info-list" ] (List.map questionInfo m)
+            ]
+
+        fab_ =
+            div [] []
+
+        children =
+            case m of
+                [] ->
+                    fab_ :: empty
+
+                _ ->
+                    fab_ :: listing
+    in
+    div []
+        [ simpleHero questions_type questions_type_description "simple-hero__page-blue"
+        , div [] children
+        ]
+
+
+questionInfo : QuestionInfo -> Html msg
+questionInfo cls =
+    div [ class "question-card" ]
+        [ Ui.Generic.icon [ class "question-info-card__icon" ] cls.icon
+        , h1 [ class "question-card__title" ]
+            [ text cls.questionName
+            ]
+        , p [ class "question-card__description" ]
+            [ text cls.shortDescription
+            ]
+        ]
+
+
+questionOne : QuestionInfo
+questionOne =
+    { questionName = "Questão mais facil"
+    , shortDescription = "Questão mais facil, se n conseguir fazer vaza."
+    , icon = "sentiment_very_satisfied"
+    }
+
+
+questionTwo : QuestionInfo
+questionTwo =
+    { questionName = "Segunda mais facil"
+    , shortDescription = "Questão facil também."
+    , icon = "code"
+    }
+
+questionThree : QuestionInfo
+questionThree =
+    { questionName = "Questão dificil"
+    , shortDescription = "Essa é hard"
+    , icon = "loop"
+    }
+
+questionFour : QuestionInfo
+questionFour =
+    { questionName = "Questão dificil"
+    , shortDescription = "Essa é hard"
+    , icon = "loop"
+    }
+
+
+clsList : List QuestionInfo
+clsList =
+    [ questionOne, questionTwo, questionThree, questionFour ]

src/Page/Questions/Base.elm → src/Page/Questions/QuestionRoot.elm

@@ -1,4 +1,4 @@
-module Page.Questions.Base exposing (clsList, viewDetail, viewList)
+module Page.Questions.QuestionRoot exposing (clsList, viewDetail, viewList)
 
 -- import Codeschool.Msg exposing (..)
 -- import Data.User exposing (User)
@@ -49,7 +49,7 @@ viewList m =
                     fab_ :: listing
     in
     div []
-        [ simpleHero "List of Questions" "See all questions available for you" "simple-hero__page-blue"
+        [ simpleHero "Category of Questions" "See all questions available for you" "simple-hero__page-blue"
         , div [] children
         ]
 
@@ -69,36 +69,47 @@ questionInfo cls =
 
 questionOne : QuestionInfo
 questionOne =
-    { questionName = "VEMMM MALUCOOOOO"
-    , shortDescription = "DESCREVE INSANOOOOOOOOOOOOOO."
-    , icon = "code"
+    { questionName = "Basic"
+    , shortDescription = "Elementary programming problems."
+    , icon = "sentiment_very_satisfied"
     }
 
 
 questionTwo : QuestionInfo
 questionTwo =
-    { questionName = "nome da questão pois é"
-    , shortDescription = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius tellus velit, ut accumsan odio tincidunt in."
-    , icon = "sentiment_very_satisfied"
+    { questionName = "Conditionals"
+    , shortDescription = "Conditional flow control (if/else)."
+    , icon = "code"
     }
 
-
 questionThree : QuestionInfo
 questionThree =
-    { questionName = "Sequência de Fibonacci"
-    , shortDescription = "Questão para testar seus conhecimentos sobre como funciona o algoritmo de fibonacci"
-    , icon = "all_out"
+    { questionName = "Loops"
+    , shortDescription = "Iterations with for/while commands"
+    , icon = "loop"
     }
 
-
 questionFour : QuestionInfo
 questionFour =
-    { questionName = "Sequência de Fibonacci"
-    , shortDescription = "Questão para testar seus conhecimentos sobre como funciona o algoritmo de fibonacci"
-    , icon = "all_out"
+    { questionName = "Functions"
+    , shortDescription = "Organize code using functions."
+    , icon = "functions"
+    }
+
+questionFive : QuestionInfo
+questionFive =
+    { questionName = "Files"
+    , shortDescription = "Open, process and write files."
+    , icon = "insert_drive_file"
     }
 
+questionSix : QuestionInfo
+questionSix =
+    { questionName = "Lists"
+    , shortDescription = "Linear data structures."
+    , icon = "list"
+    }
 
 clsList : List QuestionInfo
 clsList =
-    [ questionOne, questionTwo, questionThree, questionFour ]
+    [ questionOne, questionTwo, questionThree, questionFour, questionFive, questionSix ]

src/Ui/Header.elm

@@ -95,7 +95,7 @@ header model =
                         []
                     ]
                 , link ClassroomList "Classrooms"
-                , link QuestionList "Questions"
+                , link QuestionRoot "Questions"
                 , link Social "Social"
                 , div [class "page-header__special-buttons"]
                   [

src/scss/6_components/pages/_question.scss

@@ -15,10 +15,6 @@
     width: 30%;
     padding: 20px;
 
-//    > * {
-
-//    }
-
     &__title {
       position: relative;
       align-self: center;
@@ -44,10 +40,16 @@
     }
 }
 
+.question-card {
+        @extend .question-info-card;
+    width: 40% !important;
+}
+
 .question-info-list {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+    text-align: center;
 }
 
 @media (max-width: $breakpoint-large-screen) {
@@ -60,4 +62,44 @@
       min-width: 15em;
   }
 
+  .question-card {
+      flex: 1;
+      min-width: 15em;
+  }
+
+}
+.question-description {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      width: 75%;
+      margin: 3%;
+      margin-top: 25px;
+}
+.select-language {
+  width: 300px;
+  margin-top: 50px;
+  margin-bottom: 10px;
+  margin-left: 3%;
+}
+.item-question {
+    width: 90%;
+    height: 30vw;
+    margin: 0 auto;
+    margin-right: 5%;
+    margin-left: 1.6%;
+}
+
+.send-button {
+    width: 10px;
+    height: 50px;
+    margin: 15px auto;
+    background-color: $color-green;
+    color: white;
+    border-radius: 5px;
+    width: 20%;
+    margin-right: 5%;
+    margin-left: 64.2%;
+
 }