Krok 1. Utworzenie projektu i dodawanie etykiet do formularza

Jako pierwsze kroki w projektowaniu tego quizu tworzysz projekt i dodajesz etykiety, przycisk i inne formanty do formularza.Można również ustawić właściwości dla każdego dodawanego formantu.Projekt będzie zawierać formularz, formanty oraz (później w samouczku) kod.Przycisk uruchamia quiz, etykiety pokazują problemy quizu, a pozostałe formanty pokazują odpowiedzi do quizu oraz czas pozostały do jego zakończenia.

[!UWAGA]

Ten temat jest częścią serii samouczków na temat podstawowych pojęć kodowania.Aby uzyskać przegląd samouczka, zobacz Samouczek 2: Utworzenie kwizu matematycznego z limitem czasu.

Aby utworzyć projekt i ustawić właściwości dla formularza

1. W pasku menu wybierz Plik, Nowy, Projekt.

2. Na liście Zainstalowane szablony wybierz pozycję C# lub Visual Basic.

3. Z listy szablonów wybierz szablon Aplikacja interfejsu Windows Forms, nadaj mu nazwę Math Quiz, a następnie wybierz przycisk OK.

   Formularz o nazwie Form1.cs lub Form1.vb pojawi się, w zależności od języka programowania, który został wybrany.

4. Wybierz formularz, a następnie zmień wartość jego właściwości Tekst na Quiz matematyczny.

   Okno Właściwości właściwości dla formularza.

5. Zmień rozmiar formularza na 500 pikseli szerokości i 400 pikseli wysokości.

   Możesz zmienić rozmiar formularza, przeciągając jego krawędzie, aż w lewym dolnym rogu zintegrowanego środowiska programistycznego (IDE) pojawi się prawidłowy rozmiar.Alternatywnie można zmienić wartości właściwości Rozmiar.

6. Zmień wartość właściwości FormBorderStyle na Fixed3D i ustaw właściwość MaximizeBox na False.

   Te wartości uniemożliwiają uczestnikom quizu zmianę rozmiaru formularza.

Aby utworzyć pole pozostałego czasu

1. Dodaj formant Label z Przybornika, a następnie ustaw wartość jego właściwości (Name) na timeLabel.

   Ta etykieta stanie się polem w prawym górnym rogu, które pokazuje liczbę sekund pozostałych do końca quizu.

2. Zmień wartość właściwości AutoSize na False, tak aby można było zmienić rozmiar pola.

3. Zmień wartość właściwości BorderStyle na FixedSingle, aby narysować linię wokół pola.

4. Ustaw właściwość Rozmiar na 200, 30.

5. Przenieś etykietę do prawego górnego rogu formularza, gdzie pojawią się niebieskie linie rozdzielacza.

   Te wiersze ułatwiają wyrównywanie formantów na formularzu.

6. W oknie Właściwości wybierz właściwość Tekst, a następnie naciśnij klawisz Backspace, aby wyczyścić jej wartość.

7. Wybierz znak plusa (+) obok właściwości Czcionka, a następnie zmień wartość właściwości Rozmiar na 15,75.

   Możesz zmienić kilka właściwości czcionki, jak na poniższym obrazie.

   Okno właściwości, w którym jest widoczny rozmiar czcionki

   

8. Dodaj kolejny formant Label z Przybornika, a następnie ustaw jego rozmiar czcionki na 15,75.

9. Ustaw właściwość Text na Pozostało.

10. Przenieś etykietę, tak aby była wyrównana tuż po lewej stronie etykiety timeLabel.

Aby dodać formanty do problemów dodawania

1. Dodaj formant Label z Przybornika, a następnie ustaw jego właściwość Text na ?. (znak zapytania).

2. Ustaw właściwość AutoSize na False.

3. Ustaw właściwość Rozmiar na 60, 50.

4. Ustaw rozmiar czcionki na 18.

5. Ustaw właściwość TextAlign na MiddleCenter.

6. Ustaw właściwość Location na 50, 75, aby ustalić położenie formantu w formularzu.

7. Ustaw właściwość (Name) na plusLeftLabel.

8. Wybierz etykietę plusLeftLabel, a następnie wybierz klawisze Ctrl+C lub polecenie Kopiuj w menu Edycja.

9. Wklej etykietę trzy razy, wybierając klawisze Ctrl+V lub Wklej w menu Edytuj.

10. Ułóż trzy nowe etykiety tak, aby były w wierszu z prawej strony etykiety plusLeftLabel.

    Możesz użyć linii rozdzielacza, aby rozmieścić je i wyrównać.

11. Ustaw wartość drugiej właściwości etykiety Text na + (znak dodawania).

12. Ustaw wartość trzeciej właściwości etykiety (Name) na plusRightLabel.

13. Ustaw wartość czwartej właściwości etykiety Text na = (znak równości).

14. Dodaj formant NumericUpDown z Przybornika, ustaw jego rozmiar czcionki na 18 i ustaw jego szerokość na 100.

    Później dowiesz się więcej na temat tego rodzaju formantu.

15. Wyrównaj formant NumericUpDown z formantami etykiet dla problemu dodawania.

16. Zmień wartość właściwości (Name) dla formantu NumericUpDown na sum.

    Utworzyłeś pierwszy wiersz, co ilustruje poniższy obraz.

    Pierwszy wiersz kwizu matematycznego

    

Aby dodać formanty do problemów odejmowania, mnożenia i dzielenia

1. Skopiuj wszystkie pięć formantów dla tego problemu dodatku (cztery formanty etykiet i formant NumericUpDown), a następnie wklej je.

   Formularz zawiera pięć nowych formantów, które nadal będą zaznaczone.

2. Przenieś wszystkie formanty na miejsce, tak aby były wyrównane poniżej formantów dodatku.

   Możesz użyć linii rozdzielacza, aby ustalić wystarczającą odległość między dwoma wierszami.

3. Zmień wartość właściwości Text dla drugiej etykiety na – (znak minusa).

4. Nadaj pierwszej etykiecie znaku zapytania nazwę minusLeftLabel.

5. Nadaj drugiej etykiecie znaku zapytania nazwę minusRightLabel.

6. Nadaj formantowi NumericUpDown nazwę różnica.

7. Wklej pięć formantów jeszcze dwa razy.

8. W trzecim rzędzie, nazwij pierwszą etykietę timesLeftLabel, zmień właściwość drugiej etykiety Text na x (znak mnożenia), nazwij trzecią etykietę timesRightLabel i nazwij formant NumericUpDown iloczyn.

9. W czwartym rzędzie, nazwij pierwszą etykietę dividedLeftLabel, zmień właściwość drugiej etykiety Text na ÷ (znak dzielenia), nazwij trzecią etykietę dividedRightLabel i nazwij formant NumericUpDown iloraz.

   [!UWAGA]

   Możesz skopiować znak mnożenia × i znak dzielenia ÷ z tego samouczka i wkleić je do formularza.

Aby dodać przycisk start i ustawić indeks kolejności dostępu

1. Dodaj formant Button z Przybornika, a następnie ustaw jego właściwość (Name) na startButton.

2. Ustaw właściwość Text na Rozpocznij quiz.

3. Ustaw rozmiar czcionki na 14.

4. Ustaw właściwość AutoSize na True, co spowoduje, że rozmiar przycisku automatycznie dopasuje się do tekstu.

5. Wyśrodkuj przycisk w dolnej części formularza.

6. Ustaw wartość właściwości TabIndex dla formantu startButton na 1.

   [!UWAGA]

   Właściwość TabIndex ustawia kolejność formantów, gdy uczestnik quizu wybiera klawisz Tab.Aby zobaczyć, jak działa, otwórz dowolne okno dialogowe (na przykład na pasku menu wybierz Plik, Otwórz), a następnie naciśnij klawisz Tab kilka razy.Zobacz, jak kursor porusza się między formantami po każdorazowym naciśnięciu klawisza Tab.Programista zdecydował o kolejności podczas tworzenia tego formularza.

7. Ustaw wartość właściwości TabIndex dla formantu sumy NumericUpDown na 2, dla formantu różnicy na 3, dla formantu iloczynu na 4, a dla formantu ilorazu na 5.

   Formularz powinien wyglądać podobnie do poniższej ilustracji.

   Wstępny formularz quizu matematycznego

   

8. Aby sprawdzić, czy właściwość TabIndex działa tak, jak oczekujesz, zapisz i uruchom program, wybierając klawisz F5 lub wybierając Debuguj, Rozpocznij debugowanie na pasku menu, a następnie naciśnij klawisz Tab kilka razy.

Aby kontynuować lub przeglądnąć

• Aby przejść do kolejnego kroku samouczka, zobacz Krok 2. Utworzenie problemu losowego dodawania.

• Aby powrócić do przeglądu, zobacz Samouczek 2: Utworzenie kwizu matematycznego z limitem czasu.