URLs and their structure in Intro to Computing - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extract the protocol from the URL string.

Intro to Computing

url = "https://example.com"
protocol = url.split('[1]')[0]

Drag options to blanks, or click blank then click option'

A/

B//

C:

D://

Attempts:

3 left

💡 Hint

Common Mistakes

Using '//' instead of '://', which misses the colon.

Using ':' alone, which splits too early.

The protocol part of a URL ends with '://'. Splitting the URL by '://' separates the protocol from the rest.

2fill in blank

medium

Complete the code to get the domain name from the URL.

Intro to Computing

url = "https://example.com/path"
domain = url.split('[1]')[1].split('/')[0]

Drag options to blanks, or click blank then click option'

A//

B://

C:

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Splitting by '://', which includes the colon and may cause index errors.

Splitting by '/' first, which splits too early.

Splitting by '//' separates the protocol from the domain and path. The domain is the first part after '//', before the next '/'.

3fill in blank

hard

Complete the code to correctly extract the path from the URL.

Intro to Computing

url = "https://example.com/path/to/page"
path = url.split('//')[1].split('[1]', 1)[1]

Drag options to blanks, or click blank then click option'

A//

B://

C/

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Splitting by '://' or '//' which does not isolate the path correctly after the domain.

Splitting by ':' which is unrelated to path separation.

Split by '//' to get domain+path, then split that by '/' (maxsplit=1) to separate the domain from the path. Index [1] gives 'path/to/page'.

4fill in blank

hard

Fill both blanks to create a dictionary mapping URL parts to their values.

Intro to Computing

url = "https://example.com:8080/path?query=1"
parts = {
  'protocol': url.split('[1]')[0],
  'port': url.split(':')[[2]].split('/')[0]
}

Drag options to blanks, or click blank then click option'

A://

B1

C2

D//

Attempts:

3 left

💡 Hint

Common Mistakes

Using '//' instead of '://', which misses the colon.

Using index 1 for port, which gets the domain instead.

Splitting by '://' separates the protocol. The port is after the second colon, so index 2 after splitting by ':'.

5fill in blank

hard

Fill all three blanks to extract query parameters as a dictionary.

Intro to Computing

url = "https://example.com/path?user=alice&age=30"
query_string = url.split('[1]')[1]
params = {param.split('[2]')[0]: param.split('[2]')[1] for param in query_string.split('[3]')}

Drag options to blanks, or click blank then click option'

A?

B=

C&

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' instead of '?', which is for fragments.

Using ':' or other symbols instead of '=' or '&'.

The query string starts after '?'. Each parameter is split by '&'. Each key and value are separated by '='.

Practice

1. Which part of a URL specifies the protocol used to access a resource?
https://www.example.com:8080/path?query=123#section

easy

A. www.example.com

B. 8080

C. https

D. /path

Solution

1. Step 1: Identify the scheme in the URL

   The scheme is the part before the first colon (:), which defines the protocol.

2. Step 2: Locate the scheme in the example URL

   In https://www.example.com:8080/path?query=123#section, the scheme is https.

3. Final Answer:

   https -> Option C

4. Quick Check:

   Scheme = https [OK]

Hint: Look before :// for the protocol name [OK]

Common Mistakes:

• Confusing domain with scheme
• Thinking port number is the protocol
• Selecting path as scheme

2. Which of the following is the correct syntax for a URL including a port number?

easy

A. http://example.com:80

B. http://:80example.com

C. http://example.com/80

D. http://example.com?80

Solution

1. Step 1: Understand port placement in URL syntax

   The port number comes after the domain, separated by a colon (:).

2. Step 2: Check each option for correct port syntax

   http://example.com:80 uses http://example.com:80, which correctly places port 80 after the domain with a colon.

3. Final Answer:

   http://example.com:80 -> Option A

4. Quick Check:

   Port follows domain with colon [OK]

Hint: Port number always follows domain with a colon [OK]

Common Mistakes:

• Placing port before domain
• Using slash instead of colon for port
• Adding port as query parameter

3. What is the full path and query part of this URL?
https://shop.example.com/products/item?id=12345&color=red#reviews

medium

A. /products/item?id=12345&color=red

B. /products/item#reviews

C. ?id=12345&color=red#reviews

D. /products/item?id=12345&color=red#reviews

Solution

1. Step 1: Identify path and query parts in the URL

   The path is the part after the domain up to the question mark (?), and the query is after the question mark up to the hash (#).

2. Step 2: Extract path and query from the example URL

   Path: /products/item, Query: ?id=12345&color=red. The fragment #reviews is not part of path or query.

3. Final Answer:

   /products/item?id=12345&color=red -> Option A

4. Quick Check:

   Path + Query = /products/item?id=12345&color=red [OK]

Hint: Path starts with /, query starts with ? [OK]

Common Mistakes:

• Including fragment (#reviews) in path or query
• Confusing query with fragment
• Ignoring query parameters

4. Identify the error in this URL:
ftp//files.example.com/downloads/file.zip

medium

A. Path should start with a question mark

B. Missing colon after scheme

C. Domain name is invalid

D. Port number is missing

Solution

1. Step 1: Check the scheme syntax

   The scheme must end with a colon (:), e.g., ftp:.

2. Step 2: Locate the error in the URL

   The URL has ftp// missing the colon after ftp. Correct form is ftp://.

3. Final Answer:

   Missing colon after scheme -> Option B

4. Quick Check:

   Scheme ends with : [OK]

Hint: Scheme must end with : before // [OK]

Common Mistakes:

• Ignoring missing colon in scheme
• Thinking domain is invalid
• Expecting port number always

5. You want to create a URL to access a user profile page with user ID 789 and show the 'settings' section. Which URL correctly uses path, query, and fragment?
Base URL: https://app.example.com

hard

A. https://app.example.com/user?id=789#settings?section=profile

B. https://app.example.com/user/789#settings?section=profile

C. https://app.example.com/user/789?section=settings#profile

D. https://app.example.com/user/789?section=settings#settings

Solution

1. Step 1: Understand URL parts for user profile

   The user ID should be part of the path (/user/789), the section to show is a query parameter (?section=settings), and the fragment points to a page section (#settings).

2. Step 2: Evaluate each option for correct structure

   https://app.example.com/user/789?section=settings#settings correctly places user ID in path, section in query, and fragment as #settings. Others mix fragment and query incorrectly or mismatch sections.

3. Final Answer:

   https://app.example.com/user/789?section=settings#settings -> Option D

4. Quick Check:

   Path + Query + Fragment correct [OK]

Hint: Path for ID, query for filters, fragment for page section [OK]

Common Mistakes:

• Swapping query and fragment parts
• Putting ID in query instead of path
• Using fragment with query parameters