diff --git a/assets/images/help/classroom/assignments-click-online-ide.png b/assets/images/help/classroom/assignments-click-online-ide.png index 8e288992cf..f5af4dc564 100644 Binary files a/assets/images/help/classroom/assignments-click-online-ide.png and b/assets/images/help/classroom/assignments-click-online-ide.png differ diff --git a/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/about-using-makecode-arcade-with-github-classroom.md b/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/about-using-makecode-arcade-with-github-classroom.md index b884c06900..b2f402b4e8 100644 --- a/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/about-using-makecode-arcade-with-github-classroom.md +++ b/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/about-using-makecode-arcade-with-github-classroom.md @@ -10,7 +10,7 @@ redirect_from: --- ## About MakeCode Arcade -MakeCode Arcade is an online integrated development environment (IDE) for developing retro arcade games using drag-and-drop block programming and JavaScript. Students can write, edit, run, test, and debug code in a browser with MakeCode Arcade. For more information about online IDEs and {% data variables.product.prodname_classroom %}, see "[Integrate {% data variables.product.prodname_classroom %} with an online IDE](/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-online-ide)." +MakeCode Arcade is an online integrated development environment (IDE) for developing retro arcade games using drag-and-drop block programming and JavaScript. Students can write, edit, run, test, and debug code in a browser with MakeCode Arcade. For more information about IDEs and {% data variables.product.prodname_classroom %}, see "[Integrate {% data variables.product.prodname_classroom %} with an IDE](/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/integrate-github-classroom-with-an-ide)." {% data reusables.classroom.readme-contains-button-for-online-ide %} diff --git a/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/index.md b/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/index.md index edd13c0adb..6320275f4a 100644 --- a/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/index.md +++ b/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/index.md @@ -5,9 +5,9 @@ intro: 'You can help your students write, test, and debug code by preconfiguring versions: fpt: '*' children: - - /integrate-github-classroom-with-an-online-ide + - /integrate-github-classroom-with-an-ide - /about-using-makecode-arcade-with-github-classroom - /replit-with-github-classroom - - /run-student-code-in-an-online-ide + - /run-student-code-in-an-ide --- diff --git a/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/integrate-github-classroom-with-an-ide.md b/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/integrate-github-classroom-with-an-ide.md new file mode 100644 index 0000000000..c6b00bb80c --- /dev/null +++ b/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/integrate-github-classroom-with-an-ide.md @@ -0,0 +1,41 @@ +--- +title: Integrate GitHub Classroom with an IDE +shortTitle: Integrate with an IDE +intro: 'You can preconfigure a supported integrated development environment (IDE) for assignments you create in {% data variables.product.prodname_classroom %}.' +versions: + fpt: '*' +redirect_from: + - /education/manage-coursework-with-github-classroom/online-ide-integrations + - /education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-online-ide + - /education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/integrate-github-classroom-with-an-online-ide +--- +## About integration with an IDE + +{% data reusables.classroom.about-online-ides %} + +After a student accepts an assignment with an IDE, the README file in the student's assignment repository will contain a button to open the assignment in the IDE. The student can begin working immediately, and no additional configuration is necessary. + +## Supported IDEs + +{% data variables.product.prodname_classroom %} supports the following IDEs. You can learn more about the student experience for each IDE. + +| IDE | More information | +| :- | :- | +| Microsoft MakeCode Arcade | "[About using MakeCode Arcade with {% data variables.product.prodname_classroom %}](/education/manage-coursework-with-github-classroom/about-using-makecode-arcade-with-github-classroom)" | +| Visual Studio Code | [{% data variables.product.prodname_classroom %} extension](http://aka.ms/classroom-vscode-ext) in the Visual Studio Marketplace | + +We know cloud IDE integrations are important to your classroom and are working to bring more options. + +## Configuring an IDE for an assignment + +You can choose the IDE you'd like to use for an assignment when you create an assignment. To learn how to create a new assignment that uses an IDE, see "[Create an individual assignment](/education/manage-coursework-with-github-classroom/create-an-individual-assignment)" or "[Create a group assignment](/education/manage-coursework-with-github-classroom/create-a-group-assignment)." + +## Authorizing the OAuth app for an IDE + +The first time you configure an assignment with an IDE, you must authorize the OAuth app for the IDE for your organization. + +For all repositories, grant the app **read** access to metadata, administration, and code, and **write** access to administration and code. For more information, see "[Authorizing OAuth Apps](/github/authenticating-to-github/authorizing-oauth-apps)." + +## Further reading + +- "[About READMEs](/github/creating-cloning-and-archiving-repositories/about-readmes)" diff --git a/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/integrate-github-classroom-with-an-online-ide.md b/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/integrate-github-classroom-with-an-online-ide.md deleted file mode 100644 index a4634fc7c1..0000000000 --- a/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/integrate-github-classroom-with-an-online-ide.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Integrate GitHub Classroom with an online IDE -shortTitle: Integrate with an online IDE -intro: 'You can preconfigure a supported online integrated development environment (IDE) for assignments you create in {% data variables.product.prodname_classroom %}.' -versions: - fpt: '*' -redirect_from: - - /education/manage-coursework-with-github-classroom/online-ide-integrations - - /education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-online-ide ---- -## About integration with an online IDE - -{% data reusables.classroom.about-online-ides %} - -After a student accepts an assignment with an online IDE, the README file in the student's assignment repository will contain a button to open the assignment in the IDE. The student can begin working immediately, and no additional configuration is necessary. - -## Supported online IDE - -{% data variables.product.prodname_classroom %} supports the following online IDE. You can learn more about the student experience for each IDE. - -| IDE | More information | -| :- | :- | -| Microsoft MakeCode Arcade | "[About using MakeCode Arcade with {% data variables.product.prodname_classroom %}](/education/manage-coursework-with-github-classroom/about-using-makecode-arcade-with-github-classroom)" | - -We know cloud IDE integrations are important to your classroom and are working to bring more options. - -## Configuring an online IDE for an assignment - -You can choose the online IDE you'd like to use for an assignment when you create an assignment. To learn how to create a new assignment that uses an online IDE, see "[Create an individual assignment](/education/manage-coursework-with-github-classroom/create-an-individual-assignment)" or "[Create a group assignment](/education/manage-coursework-with-github-classroom/create-a-group-assignment)." - -## Authorizing the OAuth app for an online IDE - -The first time you configure an assignment with an online IDE, you must authorize the OAuth app for the online IDE for your organization. - -For all repositories, grant the app **read** access to metadata, administration, and code, and **write** access to administration and code. For more information, see "[Authorizing OAuth Apps](/github/authenticating-to-github/authorizing-oauth-apps)." - -## Further reading - -- "[About READMEs](/github/creating-cloning-and-archiving-repositories/about-readmes)" diff --git a/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/run-student-code-in-an-ide.md b/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/run-student-code-in-an-ide.md new file mode 100644 index 0000000000..31ff32a349 --- /dev/null +++ b/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/run-student-code-in-an-ide.md @@ -0,0 +1,25 @@ +--- +title: Run student code in an IDE +intro: You can run the code from a student assignment within the integrated development environment (IDE) that you configured for the assignment. +versions: + fpt: '*' +redirect_from: + - /education/manage-coursework-with-github-classroom/running-student-code + - /education/manage-coursework-with-github-classroom/run-student-code-in-an-online-ide + - /education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/run-student-code-in-an-online-ide +shortTitle: Run code in IDE +--- + +## About student code and IDEs + +If you configure an integrated development environment (IDE) for an assignment, you can run the code within the IDE. You don't need to clone the assignment repository to your computer. + +For more information about IDEs, see "[Integrate {% data variables.product.prodname_classroom %} with an IDE](/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/integrate-github-classroom-with-an-ide)." + +## Running student code in the IDE + +{% data reusables.classroom.sign-into-github-classroom %} +{% data reusables.classroom.click-classroom-in-list %} +{% data reusables.classroom.click-assignment-in-list %} +1. To the right of the submission, click **View IDE**. + !["View IDE" button for submission using an online IDE](/assets/images/help/classroom/assignments-click-view-ide.png) diff --git a/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/run-student-code-in-an-online-ide.md b/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/run-student-code-in-an-online-ide.md deleted file mode 100644 index c4909b8d34..0000000000 --- a/content/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide/run-student-code-in-an-online-ide.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Run student code in an online IDE -intro: You can run the code from a student assignment within the online integrated development environment (IDE) that you configured for the assignment. -versions: - fpt: '*' -redirect_from: - - /education/manage-coursework-with-github-classroom/running-student-code - - /education/manage-coursework-with-github-classroom/run-student-code-in-an-online-ide -shortTitle: Online IDE ---- -## About student code and online IDEs - -If you configure an online integrated development environment (IDE) for an assignment, you can run the code within the online IDE. You don't need to clone the assignment repository to your computer. - -For more information about online IDEs, see "[Integrate {% data variables.product.prodname_classroom %} with an online IDE](/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-online-ide)." - -## Running student code in the online IDE - -{% data reusables.classroom.sign-into-github-classroom %} -{% data reusables.classroom.click-classroom-in-list %} -{% data reusables.classroom.click-assignment-in-list %} -1. To the right of the submission, click **View IDE**. - !["View IDE" button for submission using an online IDE](/assets/images/help/classroom/assignments-click-view-ide.png) diff --git a/content/education/manage-coursework-with-github-classroom/teach-with-github-classroom/create-a-group-assignment.md b/content/education/manage-coursework-with-github-classroom/teach-with-github-classroom/create-a-group-assignment.md index 997dd7aba3..471a517c1c 100644 --- a/content/education/manage-coursework-with-github-classroom/teach-with-github-classroom/create-a-group-assignment.md +++ b/content/education/manage-coursework-with-github-classroom/teach-with-github-classroom/create-a-group-assignment.md @@ -80,7 +80,7 @@ If you've already created a group assignment for the classroom, you can reuse a {% data reusables.classroom.assignments-guide-intro-for-environment %} - [Choosing a template repository](#choosing-a-template-repository) -- [Choosing an online integrated development environment (IDE)](#choosing-an-online-integrated-development-environment-ide) +- [Choosing an integrated development environment (IDE)](#choosing-an-integrated-development-environment-ide) ### Choosing a template repository @@ -88,7 +88,7 @@ By default, a new assignment will create an empty repository for each team that {% data reusables.classroom.assignments-guide-choose-template-repository %} -### Choosing an online integrated development environment (IDE) +### Choosing an integrated development environment (IDE) {% data reusables.classroom.about-online-ides %} For more information, see "[Integrate {% data variables.product.prodname_classroom %} with an IDE](/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide)." diff --git a/content/education/manage-coursework-with-github-classroom/teach-with-github-classroom/create-an-individual-assignment.md b/content/education/manage-coursework-with-github-classroom/teach-with-github-classroom/create-an-individual-assignment.md index 459420f72f..2976bb8378 100644 --- a/content/education/manage-coursework-with-github-classroom/teach-with-github-classroom/create-an-individual-assignment.md +++ b/content/education/manage-coursework-with-github-classroom/teach-with-github-classroom/create-an-individual-assignment.md @@ -60,7 +60,7 @@ Under "Individual or group assignment", select the drop-down menu, and click **I {% data reusables.classroom.assignments-guide-intro-for-environment %} - [Choosing a template repository](#choosing-a-template-repository) -- [Choosing an online integrated development environment (IDE)](#choosing-an-online-integrated-development-environment-ide) +- [Choosing an integrated development environment (IDE)](#choosing-an-integrated-development-environment-ide) ### Choosing a template repository @@ -70,7 +70,7 @@ By default, a new assignment will create an empty repository for each student on {% data reusables.classroom.assignments-guide-click-continue-after-starter-code-and-feedback %} -### Choosing an online integrated development environment (IDE) +### Choosing an integrated development environment (IDE) {% data reusables.classroom.about-online-ides %} For more information, see "[Integrate {% data variables.product.prodname_classroom %} with an IDE](/education/manage-coursework-with-github-classroom/integrate-github-classroom-with-an-ide)." diff --git a/data/reusables/classroom/about-online-ides.md b/data/reusables/classroom/about-online-ides.md index 43818e691f..f0f8c18688 100644 --- a/data/reusables/classroom/about-online-ides.md +++ b/data/reusables/classroom/about-online-ides.md @@ -1 +1 @@ -You can optionally configure an assignment to use an online integrated development environment (IDE). Online IDEs allow your students to write code, run programs, and collaborate in a browser, without installing Git and a full development toolchain on the student's computer. If you choose an online IDE for an assignment, students can still check out and run code locally on a computer with the necessary software. +You can optionally configure an assignment to use an integrated development environment (IDE). IDEs allow your students to write code, run programs, and collaborate without installing Git and a full development toolchain on the student's computer. If you choose an IDE for an assignment, students can still check out and run code locally on a computer with the necessary software. diff --git a/data/reusables/classroom/assignments-guide-choose-an-online-ide.md b/data/reusables/classroom/assignments-guide-choose-an-online-ide.md index 54858178a5..8f6dd4888d 100644 --- a/data/reusables/classroom/assignments-guide-choose-an-online-ide.md +++ b/data/reusables/classroom/assignments-guide-choose-an-online-ide.md @@ -1,4 +1,4 @@ -To choose an online IDE for the assignment, select the **Select an online IDE** drop-down menu, then click the IDE you'd like your students to use. +To choose an IDE for the assignment, select the Add an editor drop-down menu and click the IDE you'd like your students to use.
Using the 'Select an online IDE' drop-down menu to click an online IDE for the assignment diff --git a/data/reusables/classroom/assignments-guide-create-the-assignment.md b/data/reusables/classroom/assignments-guide-create-the-assignment.md index dccd3b7b9e..32e6df8c9a 100644 --- a/data/reusables/classroom/assignments-guide-create-the-assignment.md +++ b/data/reusables/classroom/assignments-guide-create-the-assignment.md @@ -1,23 +1,7 @@ -### If there are no existing assignments in the classroom - -To create your first assignment: - 1. Sign into {% data variables.product.prodname_classroom_with_url %}. 1. Navigate to a classroom. -1. In the {% octicon "repo" aria-label="The repo icon" %} **Assignments** tab, click **Create an assignment**. - -
- Creating your first assignment -
- -### If there already are existing assignments in the classroom - -To create an assignment: - -1. Sign into {% data variables.product.prodname_classroom_with_url %}. -1. Navigate to a classroom. -1. In the {% octicon "repo" aria-label="The repo icon" %} **Assignments** tab, click **New assignment**. - -
- The 'New assignment' button -
+1. In the {% octicon "repo" aria-label="The repo icon" %} **Assignments** tab, create the assignment. + - If this your first assignment, click **Create an assignment**. + ![Creating your first assignment](/assets/images/help/classroom/assignments-create-first-assignment.png) + - Otherwise, click **New assignment**. + ![The 'New assignment' button](/assets/images/help/classroom/assignments-click-new-assignment-button.png) diff --git a/data/reusables/classroom/readme-contains-button-for-online-ide.md b/data/reusables/classroom/readme-contains-button-for-online-ide.md index fac85f79f1..ba12fbf246 100644 --- a/data/reusables/classroom/readme-contains-button-for-online-ide.md +++ b/data/reusables/classroom/readme-contains-button-for-online-ide.md @@ -1 +1 @@ -When a student accepts an assignment with an online IDE, the assignment repository will include a _README.md_ file with a special button at the top of the file. The button links the student directly to the workspace in the online IDE. +When a student accepts an assignment with an IDE, the assignment repository will include a _README.md_ file with a special button at the top of the file. The button links the student directly to the workspace in the IDE.